ugrás a tartalomhoz

CSS div függőleges kitöltés

larryhughes · 2010. Jan. 2. (Szo), 12.36
Ü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:

<div id="header">valami</div>
<div id="content">valami</div>
<div id="footer">valami</div>
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:

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

táblázat vs. js

ironwill · 2010. Jan. 2. (Szo), 19.26
Szia!

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
2

Re:

larryhughes · 2010. Jan. 2. (Szo), 20.32
A javascriptet és a táblázatokat inkább mellőzném, ha lehet. Viszont a div-es részt megköszönném, ha kifejtenéd kicsit jobban. :-) Ha csak az IE6-os megjelenés lenne a gond, az nem is nagyon érdekelne, nekem elsőre bőven elég, ha a 3-as Firefoxon és (7-es ill.) 8-as Exploreren kinéz valahogy az oldal.
3

sajnos csak ennyi..

ironwill · 2010. Jan. 2. (Szo), 22.10
Szia!

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
4

Erre normális megoldás nincs

echo · 2010. Jan. 2. (Szo), 23.37
Szia, rég "játszom" a css-el, de normális megoldás erre nincs ha IE6-ra is oda akarsz figyelni, márpedig paradicsom dobálással sújtandó bűn, ha mellőzöd, kivéve ha nem egy intranetes app-ról van szó és letiltod, hogy IE-ben fusson...

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:
<title>Proba</title>
<style type="text/css">
 html {  
    height: 100%;  
   }  
 body {  
    height: 100%;  
    margin: 0px;  
    padding: 0px;  
    }  
 #header {  
 width: 850px;  
 height: 50px;  
 margin: auto;  
 background: #dcdcdc;
 }  
 #content {  
width: 850px;  
margin: auto;  
 }  
 #footer {  
  width: 850px;  
  height: 50px;  
  margin: -50px auto 0px auto;  
  background: #dcdcdc;
 }  
 .heightfix { height: 100%; }
</style>
</head>

<body>

<div class="heightfix">
<div id="header">valami</div>
<div id="content">valami</div>
</div>
<div id="footer">valami</div>

</body>
Ami a lényeg, a fölső cuccoknak megadjuk 100%ra a heightot, ez kitolja a footert, de a footernek tudjuk a fix magasságát, tehát visszahuzzuk margin-top: -50px-el.

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

position:absolute

Dömcsi · 2010. Jan. 3. (V), 14.08
Két megoldás:
A content magassága automatikus lesz:
vagy a háttér színe látszik:
Tessék választani.
6

Nem látok különbséget...

echo · 2010. Jan. 3. (V), 16.38
Szia Dömcsi, nem nagyon látok különbséget az általad megadott két megoldás között. Körülbelül ugyanarra a logikára alapszik mint az én megoldásom, csak position: absoluttal nem leszel képes lejebb tolni abban az esetben ha a contented már nem fér bele az ablakba, ezért kell marginnal megoldani, amit kiegyensúlyozhatsz bizonyos esetben, ha előkell jönni a scroolbar-nak például.
7

overflow: auto

Dömcsi · 2010. Jan. 3. (V), 17.08
A contentnek overflow: auto; és lehet görgetni:
8

köszönöm

larryhughes · 2010. Jan. 3. (V), 17.10
Köszönöm szépen a válaszokat! Végig fogom próbálgatni mindegyiket, már hogy tanuljak is belőle valamit.