Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Height 100% i "collapsed" body
Mike0
post
Post #1





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 10.03.2011

Ostrzeżenie: (0%)
-----

Witam, próbuję stworzyć banalny (mogłoby się wydawać) layout, ale jednak jak się okazuje nie mogę sobie z nim poradzić.

Ogólnie chodzi mi o to, że potrzebuję nadać tło dla znacznika HTML i BODY, a jednocześnie przy tym dla wielu DIVów (jeden pod drugim) ustawić wartość height:100%;
Ogólnie wiem jak to zrobić, czyli:
[HTML] pobierz, plaintext 
  1. html, body{ height:100%; }
  2. div.myClass{ min-height:100% }
[HTML] pobierz, plaintext

Z tym, że nadanie dla body wysokości 100% powoduje oczywisty błąd - przy scrollowaniu dokładnie widać gdzie kończy się znacznik body (po owych 100% wysokości ekranu; o dziwo dla HTML nie jest to problemem).

Oczywiście min-height zamiast height dla body mnie nie ratuje, bo wtedy wewnętrzne divy nie są wysokie na wysokość okna przeglądarki....

Tak więc, albo znajdę inny sposób na zmianę wysokości divów (a nie chcę używać do tego JS), albo zaczepię nową warstwę jako fixed i ona będzie 2 tłem zamiast body, ale to namiesza mi w htmlu, więc wolałbym sprytny i ładny pomysł....


Baaardzo proszę o pomoc! (IMG:style_emoticons/default/nerdsmiley.png)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Mike0
post
Post #2





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 10.03.2011

Ostrzeżenie: (0%)
-----

(IMG:style_emoticons/default/sciana.gif)
To może opowiem od początku, może ktoś mi podrzuci pomysł. Chcę zrobić stronę "responsive design" z infinite scrolling. Do tego właśnie potrzebuję by DIV.page był wysoki na co najmniej 100% - by naraz widać było tylko 1 "podstronę". Menu ma być FIXED na lewo by było zawsze pod ręką. Do tego ustawione tła dla HTML (fixed) i BODY (kolor). 
[HTML] pobierz, plaintext 
  1. <body>
  2. <!-- na potrzeby grida, szerokość max 1680px -->
  3. <div class="page-wrap">
  4.     <!-- na potrzeby grida, szerokość max 1660px -->
  5.     <div class="content-wrap">
  6.  
  7.         <!-- Menu: FIXED na lewo -->
  8.         <ul class="side-menu">
  9.             <li class="current"><a href="#"class="icon-home">BEGINNING</a></li>
  10.             <li class="current"><a href="#"class="icon-home">BEGINNING</a></li>
  11.             <li class="current"><a href="#"class="icon-home">BEGINNING</a></li>
  12.             <li class="current"><a href="#"class="icon-home">BEGINNING</a></li>             
  13.         </ul>
  14.  
  15.         <!-- Miejsce na podstrony -->
  16.         <!-- margin-left by menu nie przesłaniało treści -->
  17.         <div class="wrap">
  18.  
  19.                 <div class="page page-beginning">
  20.  
  21.                         Tekst 1
  22.  
  23.                 </div>
  24.  
  25.                 <div class="page page-2">
  26.  
  27.                         Tekst 2
  28.  
  29.                 </div>
  30.  
  31.                 <div class="page page-3">
  32.  
  33.                         Tekst 3
  34.  
  35.                 </div>
  36.  
  37.         </div>
  38.  
  39.     </div>
  40.  
  41. </div>
  42. </body>
[HTML] pobierz, plaintext


Czy ktoś ma jakieś sugestie jak ładnie rozwiązać taką sytuację?
Go to the top of the page
+Quote Post

Posty w temacie
- Mike0   Height 100% i "collapsed" body   21.05.2013, 13:34:45
- - Hyth   Nie jestem pewien, ale czy próbowałes dodać do ...   21.05.2013, 13:40:08
- - Mike0   Witam, niestety nie działa :< I w sumie się nie...   21.05.2013, 13:47:40
- - Hyth   Ok, mój błąd. Spróbuj: html{ height: 100%; } b...   21.05.2013, 13:53:55
- - Mike0   Nadal nic, a właściwie trick z wysokością dla diva...   21.05.2013, 13:56:59
- - com   http://jsfiddle.net/q7ZkK/ Nie bardzo rozumiem Co ...   21.05.2013, 14:03:26
- - Hyth   Dokładnie tak jak poprzednik napisał. Jest to zasa...   21.05.2013, 14:10:50
- - Mike0   http://jsfiddle.net/54rvR/4/ Chodzi o to by body ...   21.05.2013, 14:20:12
- - com   Nie zrobisz tego w ten sposób, ponieważ wysokość b...   21.05.2013, 14:35:35
- - Hyth   Ewentualnie zabawy na html, i klasie divów http:/...   21.05.2013, 14:45:42
- - Mike0   To może opowiem od początku, może ktoś mi podrzuci...   21.05.2013, 14:55:52
- - com   Takie pytanie jaki ma to związek z RWD ? ponadto j...   21.05.2013, 15:12:03
- - Mike0   Wiem, ze do tego są media queries i nie bardzo sie...   21.05.2013, 16:07:18
- - com   body obejmuje całą stronę, ale nie da się z poziom...   21.05.2013, 17:24:35

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.10.2025 - 18:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn