Zaloguj się

fate · 30-03-2012, 17:36

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?

nst · 30-03-2012, 18:42

a nie wystarczy height 100%?

Moody · (Ten post był ostatnio modyfikowany: 30-03-2012, 19:26 przez Moody.)

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%

**Kartofelek** · 30-03-2012, 19:53

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.

Moody · 30-03-2012, 21:28

(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?

fate · (Ten post był ostatnio modyfikowany: 30-03-2012, 23:36 przez fate.)

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 Smile

Moody · 30-03-2012, 23:35

Może wklej kod?

fate · (Ten post był ostatnio modyfikowany: 31-03-2012, 20:52 przez fate.)

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 css

index:

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

**Kartofelek** · 31-03-2012, 14:47

http://peterned.home.xs4all.nl/examples/csslayout1.html

fate · (Ten post był ostatnio modyfikowany: 31-03-2012, 20:45 przez fate.)

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 Smile

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>

Dziekuje. +
Pozdrawiam.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie