+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: min-height: 100% nie dziala dla DIV (/thread-min-height-100-nie-dziala-dla-div)
min-height: 100% nie dziala dla DIV - fate - 30-03-2012
Dlaczego FF i Chrome nie rozciagaja mi diva o parametrze min height 100% na cale okno mimo iz body oraz html sa ustawione na 100% moze trzeba cos dopisac zebyzadzialalo?
RE: min-height: 100% nie dziala dla DIV - nst - 30-03-2012
a nie wystarczy height 100%?
RE: min-height: 100% nie dziala dla DIV - Moody - 30-03-2012
Jak minimalna długość może być 100%? 100% to 100% więc zawsze będzie całość. Dlatego wystarczy deklaracja height: 100%
I wtedy ewentualnie można też dodać min-height:100%
RE: min-height: 100% nie dziala dla DIV - Kartofelek - 30-03-2012
Co wy panowie za rzeczy wypisujecie.
Min-height można spokojnie ustawić na 100%. Wtedy jest to min 100% wysokości rodzica. Stosuje się to przy layoutach na 100% ekranu. W nich to za pomocą tej właściwości ustawiamy layout by miał wysokość minimum 100% wysokości ekranu.
Min-height oczywiście działa, ale rodzic MUSI mieć ustawioną wysokość.
Popatrz sobie na necie w "min-height 100% css". Jest od groma przykładów.
RE: min-height: 100% nie dziala dla DIV - Moody - 30-03-2012
(30-03-2012, 19:53)Kartofelek napisał(a): Stosuje się to przy layoutach na 100% ekranu.
Co masz dokładnie na myśli? Jakieś przykłady?
RE: min-height: 100% nie dziala dla DIV - fate - 30-03-2012
jak dam tylko height na 100% to wieksza tresc(przekraczajaca wysokosc okna) sie nie wyswietli nie bedzie przewijania
Kartofelek wlasnie pisze przeciez ze body ma 100% height i html tez i body rozciaga a div ktory jest zaraz po znaczniku body min-height nie rozciaga a height tak. FF11 Chrome 17 i nie radza sobie z interpretacja.. ?! moze mam zly doctype ale probowalem z tym od html 4 i 5. moze jakies inne style tj. marginy paddingi overflowy hidden czy clear bothy mi cos psuja czyto mozliwe?
dodam ze strona ma rozszerzenie php ale to chyba bez znaczenia
Dobra - sprawdzilem taki szkielet w FF10:
<html style="height: 100%";>
<head>
</head>
<body style="height: 100%";>
<div style="min-height: 100%;">
lol
</div>
</body>
</html>
i rzeczywiscie rozciaga.. a na mojej stronce nie dziala.. strzeli ktos jaki tag moze mi blokowac rozciaganie?
moze tu nie ma doctype i tu lezy przyczyna jak co mi to renderuje jak nie ma deklaracji?
a moze na ff11 juz ten kod nie zinterpretuje.. ?! choc watpie raczej wina webmastera;]
bo jestem ze tak powiem gdzie indziej i nie ma od reki kodu cssa
Dzieki za odp
RE: min-height: 100% nie dziala dla DIV - Moody - 30-03-2012
Może wklej kod?
RE: min-height: 100% nie dziala dla DIV - fate - 31-03-2012
sprobujmy ale to chyba nie jest dobry pomysl:
obecny 100 razy zmieniany css, poouduwane marginy i paddingi choc chyba niepotrzebnie
Kod:
tu byl zamotany kod cssindex:
Kod:
tu byl index z danymi osobowymi:(Doszedlem do moentu ze rozciaga mi tego diva CONT jak w szkielecie ale nim sa header main foot i nie wiem jak teraz tutaj poustawiac i czy to wogole wykonalne bo w mainie tez jest frame i right. Jak naglowkowi i stopce dam wielkosc w pikselach to 100% height powinno sie chyba odnosic nie do przegladarki a do el. macierzystego i..
teraz wymyslilem ze trzeba dac chyba height 100% -Xpx - ypx tyle ze sprawdzilem nie ma to odniesienia do wc3
kod usuniety nic nie wnosi odpowiedz na wątek poniżej
RE: min-height: 100% nie dziala dla DIV - Kartofelek - 31-03-2012
http://peterned.home.xs4all.nl/examples/csslayout1.html
RE: min-height: 100% nie dziala dla DIV - fate - 31-03-2012
No to temat do zamkniecia. Link powyzej wyczerpuje temat całkowicie. Ja zaczalem bawic sie od podstaw i poznawalem dzialanie tych wszystkich funkcji krok po kroku i wyczarowalem taki layout ktory ma jedna wade pasek przewijanie nawet gdy nie jest konieczny i jakby lekki odstep na dole nie wiem czym spowodowany gdyz przy polozeniu relative tak jakby sie niweluje.
Przeletnie wytestowalem layout z linka i jest tych wad pozbawiony, nie mniej jednak wstawiam swoj arcy-kod dla potomnych leniwych ktorzy nie lubia angielskiego i kombinowania z przerabianiem. Ja niebawem zabazuje swoaja stronke o layout od Kartofelka i sprawdze dokaldnie roznice z moim kodem no i pewnie znowu cos wyniknie
Kod:
<html style="height: 100%;">
<head>
</head>
<body style="height: 100%; ">
<div style="background-color: green; height: 100px; position: absolute; top: 0px; left: 0px; width: 100%;">
HEADER
</div>
<div style="background-color: yellow; min-height: 100%; height: auto; position: absolute; top: 0px; left: 0px; width: 100%; z-index: -1; overflow: hidden; ">
<div style="overflow: visible; padding-top: 100px; padding-bottom: 30px;">
CONTENT <br />
</div>
<div style="background-color: red; height: 30px; width: 100%; position: absolute; bottom: 0px; left: 0px; ">
FOOTER
</div>
</div>
</body>
</html>Pozdrawiam.