CSS div függőleges kitöltés
Üdv!
Erősen ismerkedőben a CSS-el, egy olyan problémába ütköztem, amit jónéhány napi guglizás után sem sikerült megoldanom.
Van egy egyszerű honlap struktúra:A header és a footer 50px. Hogyan lehet megcsinálni azt, hogy a content div kitöltse a böngészőben a rendelkezésére álló függőleges teret úgy, hogy a footer a böngésző aljához illeszkedjen? A content tartalma esetenként csak néhány szó, ezért az nem mindig tudja biztosítani, hogy a honlap alja elérje a böngésző alját (különösen nagyobb felbontások esetén).
Néhány leírás alapján én ezzel próbálkoztam:Sajnos ez sem igazán megfelelő, mert ekkor viszont már megjelenik a görgetősáv, és a footert csak legörgetve lehet elérni.
■ Erősen ismerkedőben a CSS-el, egy olyan problémába ütköztem, amit jónéhány napi guglizás után sem sikerült megoldanom.
Van egy egyszerű honlap struktúra:
<div id="header">valami</div>
<div id="content">valami</div>
<div id="footer">valami</div>
Néhány leírás alapján én ezzel próbálkoztam:
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#header {
width: 850px;
height: 50px;
margin: auto;
}
#content {
width: 850px;
min-height: 100%;
margin: auto;
}
#footer {
width: 850px;
height: 50px;
margin: auto;
}
táblázat vs. js
Szerintem a legegyszerűbb módot válaszd!
Csináld táblázattal.
Esetleg, hogy a "tableless" szabványnak is megfeleljen csinálhatnád div-ekkel, amiknek table tulajdonságat állítasz be, de ez sajna nem működik minden böngészőn. (IE6 böngésző?? o.O)
Esetleg csinálhatod javascript-tel és mindig utánna igazítod a mérete, ha pl. az ablak átméreteződik stb.
Vagy még egy lehetőség, ha százalékosan állítod be a méreteket.
Hátránya, hogy kis ablaknál nagyon kicsi lehet a lábléc, nagy ablaknál nagyon nagy.
A döntés, a te kezedben van! :)
üdv, Gábor
Re:
sajnos csak ennyi..
http://www.pageresource.com/dhtml/cssprops.htm
- display: inline-table; azt a tulajdonságot, amire szükséged van.
Részletesebben nem ismerem ezt, mivel én inkább táblázattal oldok meg valamit, mint div-eket alakítsak "táblázattá".
Jobban utánna kellene olvasni, hogy az Explorer-ek közül, csak 6-os nem támogatja ezt a tulajdonságot, vagy az összes úgy "unblock".
üdv, Gábor
Erre normális megoldás nincs
A display: inline-table az jó megoldás lenne és egyszerü, de IE6 nem támogatja.
A javascript jó megoldás lenne, de ha kivan kapcsolva akkor gáz van.
A százalékos dolog ugyancsak megoldhatná, de az is húzós.
Akkor mérlegelj, hogy mid van és én a helyedben igy gondolkoznék, mivel nekem is volt pár hasonló megrendelőm. Azt mondom hogy beállitok egy min-height-ot és egy height-ot hogy IE6-ban is jó legyen, ettől mindig lesz egy kivánt kis hely az oldalban, amitől pofásabb. Hogy nem mindig a böngésző aljához van igazitva, az semmit nem számit, mert ha igen akkor régen rosz a desginja az oldalnak. De ha mégis kicsit is számit, akkor azért a kicsiért bevetném a javascriptet IE alá és inline-table-el a többi alá. És ha kivan kapcsolva az illetőnek a javascript, akkor az már legyen az ő baja, manapság kikapcsolt javascriptel elég hátrányos a böngészés.
És ha jólemlékszem, régebben én ezt megoldottam valahogy a százalékokkal, úgymond css tákolmány volt. Ha összejön újból, elmondom neked is.
Ja és a táblázatokat felejtsd el, örökre, azoknak is megvan a saját helyük és használati céluk, de ha nagyon akarjuk még onnan is kiküszöbölhetjük őket.
P.S.: Na összetákoltam itt valamit:
Remélem segit
P.S.2: Jaj ez a baj az 5 perces megoldásokkal. Az van hogy azért nem jó egyáltalán az ilyesmi, mivel mi van ha a content-ben levő cucc magasabb mint a bongésző? Arra azt kell, gondolom hogy a content aljának bedobsz egy 50px margint. Ki lehet küszöbölni a problémákat.
position:absolute
A content magassága automatikus lesz:
vagy a háttér színe látszik:
Tessék választani.
Nem látok különbséget...
overflow: auto
köszönöm