Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Height 100% i "collapsed" body
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Mike0
21.05.2013, 13:34:45
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! nerdsmiley.png
Hyth
21.05.2013, 13:40:08
Nie jestem pewien, ale czy próbowałes dodać do "body" i "html" height i min-height jednocześnie na 100% ?
Mike0
21.05.2013, 13:47:40
Witam, niestety nie działa :<
I w sumie się nie dziwię, bo najpierw mówimy "miej wysokość dokładnie 100%" i jednocześnie "ale nie mniej niż 100%", więc wychodzi na jedno...
Hyth
21.05.2013, 13:53:55
Ok, mój błąd.

Spróbuj:

html{
height: 100%;
}
body {
min-height: 100%;
}
Mike0
21.05.2013, 13:56:59
Nadal nic, a właściwie trick z wysokością dla diva 100% przestaje działać.
com
21.05.2013, 14:03:26
http://jsfiddle.net/q7ZkK/ Nie bardzo rozumiem Co tu Ci nie działa?
Hyth
21.05.2013, 14:10:50
Dokładnie tak jak poprzednik napisał. Jest to zasadzie Twoja pierwsza konfiguracja i u mnie również działa bezproblemowo. Kolejne divy mają 100% wysokości ekranu i znajdują się pod sobą. Chyba po prostu nie rozumiemy o co Ci dokładnie chodzi.

Mi wyszło tak:

http://jsfiddle.net/Hyth/54rvR/

Edit:

Ok chyba, że chcesz jeszcze zresetować ramki z body to dodajesz do body:

body {
padding: 0;
margin: 0;
}
Mike0
21.05.2013, 14:20:12
http://jsfiddle.net/54rvR/4/

Chodzi o to by body obejmowało wszystkie N divów, teraz jak widać na demo obejmuje tylko 1. Reszta ma być tak jak jest.
com
21.05.2013, 14:35:35
Nie zrobisz tego w ten sposób, ponieważ wysokość body ustalana jest przy lądowaniu dom czyli wysokość jednego ekranu, jeśli te divy maja być puste to możesz zrobić to tak http://jsfiddle.net/54rvR/6/

A w zasadzie to zmień koncepcje i to co próbujesz uzyskać w body opakuj w div i będzie wszystko grało smile.gif
Hyth
21.05.2013, 14:45:42
Ewentualnie zabawy na html, i klasie divów

http://jsfiddle.net/Hyth/9ttxs/

Edit: ale to bezsensu, nie o to raczej chodziło, bo to można było zrobić już dawno wink.gif
Mike0
21.05.2013, 14:55:52
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ę?
com
21.05.2013, 15:12:03
Takie pytanie jaki ma to związek z RWD ? ponadto jak już mowa o RWD to tam masz do ustalania tych parametrów Media Queries http://www.w3.org/TR/css3-mediaqueries/ A wgl to jaki to ma związek z tym o co pytałeś wcześniej bo wdg mnie zerowy... Bo teraz mówisz że chcesz żeby div page miał 100% a tam była mowa o body, wiec zupełnie dwie różne kwestie...
Mike0
21.05.2013, 16:07:18
Wiem, ze do tego są media queries i nie bardzo sie to wiąże z tym tematem na tym etapie. Nigdzie nie napisałem, że moim założeniem jest że body ma mieć 100%.
Body ma obejmować całą stronę. A wewnątrz jego mają znajdować się div'y z min-height: 100%.
com
21.05.2013, 17:24:35
body obejmuje całą stronę, ale nie da się z poziomu html ustawić większego niż 100% dlatego to co wykracza poza ekran nie jest już kolorowane, jeśli bardzo być musi to musisz to wrzucić w znacznik html lub zmieniać dynamicznie z poziomu js lub JQ wink.gif może pomoże http://www.jqueryscript.net/demo/jQuery-Si...n-scrollomatic/ wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.