Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Height 100% i "collapsed" body
Mike0
post 21.05.2013, 13:34:45
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! nerdsmiley.png
Go to the top of the page
+Quote Post
Hyth
post 21.05.2013, 13:40:08
Post #2





Grupa: Zarejestrowani
Postów: 23
Pomógł: 2
Dołączył: 21.05.2013

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

Nie jestem pewien, ale czy próbowałes dodać do "body" i "html" height i min-height jednocześnie na 100% ?
Go to the top of the page
+Quote Post
Mike0
post 21.05.2013, 13:47:40
Post #3





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

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

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...

Ten post edytował Mike0 21.05.2013, 13:47:56
Go to the top of the page
+Quote Post
Hyth
post 21.05.2013, 13:53:55
Post #4





Grupa: Zarejestrowani
Postów: 23
Pomógł: 2
Dołączył: 21.05.2013

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

Ok, mój błąd.

Spróbuj:

html{
height: 100%;
}
body {
min-height: 100%;
}
Go to the top of the page
+Quote Post
Mike0
post 21.05.2013, 13:56:59
Post #5





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

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

Nadal nic, a właściwie trick z wysokością dla diva 100% przestaje działać.
Go to the top of the page
+Quote Post
com
post 21.05.2013, 14:03:26
Post #6





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

http://jsfiddle.net/q7ZkK/ Nie bardzo rozumiem Co tu Ci nie działa?
Go to the top of the page
+Quote Post
Hyth
post 21.05.2013, 14:10:50
Post #7





Grupa: Zarejestrowani
Postów: 23
Pomógł: 2
Dołączył: 21.05.2013

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

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;
}

Ten post edytował Hyth 21.05.2013, 14:18:09
Go to the top of the page
+Quote Post
Mike0
post 21.05.2013, 14:20:12
Post #8





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

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

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.
Go to the top of the page
+Quote Post
com
post 21.05.2013, 14:35:35
Post #9





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

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

Ten post edytował com 21.05.2013, 14:38:45
Go to the top of the page
+Quote Post
Hyth
post 21.05.2013, 14:45:42
Post #10





Grupa: Zarejestrowani
Postów: 23
Pomógł: 2
Dołączył: 21.05.2013

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

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

Ten post edytował Hyth 21.05.2013, 14:51:30
Go to the top of the page
+Quote Post
Mike0
post 21.05.2013, 14:55:52
Post #11





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

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

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
com
post 21.05.2013, 15:12:03
Post #12





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

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...

Ten post edytował com 21.05.2013, 15:16:13
Go to the top of the page
+Quote Post
Mike0
post 21.05.2013, 16:07:18
Post #13





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

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

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%.
Go to the top of the page
+Quote Post
com
post 21.05.2013, 17:24:35
Post #14





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

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

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

Ten post edytował com 21.05.2013, 17:25:20
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

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