ugrás a tartalomhoz

CSS + position:absolute + bottom probléma

avus · 2007. Jan. 27. (Szo), 03.43
Tehát a következő a bajom. Van az alábbi kód:


<div id="kulso" style="position relative; height: 100%">

	<div id="tartalom" style="padding-bottom: 50px">
		Szöveg
	</div>

	<div id="also" style="position: absolute; bottom: 0px">
		Ide akarom a lábléc szöveget
	</div>

</div>
Ennek a kódnak az lenne a célja, hogy a láblécem mindig fixen az oldal alján legyen, akkor is, ha az oldalon csak kevés a tartalom, mint a régi "szép" táblázatos időkben. Találtam egy footer-stick megoldást, amiben negatív margóval állítják be az aljára a láblécet, nem is rossz, de nekem a fenti elegánsabb lenne ha...

Szóval az a probléma vele, hogy ha kevés tartalom van az oldalon, akkor az also szépen lemegy a kulso DIV, tehát az oldal aljára. Ha viszont sok a tartalom, megjelenik a gördítősáv, akkor arra gondoltam, hogy a tartalom-nak adott 50-es alsó padding majd tesz róla, hogy há fedésbe is kerülnek, elég messze lesznek a szövegek egymástól. Itt köpött a levesembe az also, ő ugyanis nem ment le a kulso DIV aljára, hanem továbbra is tapadt a böngészőablak aljához, ami miatt csúnyán fedésbe került a tartalommal...

Tudtok erre valami gyógymódot? Esetleg olyan footer-stick megoldást, ahol nem kell pixeleket méricskélnem?
‹ Internet Explorer 7 hacks CSS - DIV-ek ›
 ■
1

A kulso 100%

Jano · 2007. Jan. 27. (Szo), 12.21
A kulso a 100% magassága azt jelenti, hogy az őt tartalmazó ablak magasságát veszi fel. Tehát ahhoz igazodik a magassága ami kifelé van és nem dinamikusan méreteződik a benne levő cucchoz képest! A height fix. Az, hogy mi történik a benne levő cuccal azt a "túlfolyás" overflow tulajdonság mondja meg. Mivel a "kulso" MINDIG az ablak aljáig ér, ezért az ő aljához igazított (position:relative miatt ő a referencia) cucc is az ablak aljánál lesz.

A min-height-t kéne használnod. Csak ezzel meg trükközni kell mert IE6 nem tudja.