Några div-boxar ej 100% höga

En klassisk fråga antagligen, brukar inte fråga sådana "elementära" saker. Men har suttit hela kvällen och pysslat med detta och det bara går inte!

Ska gå över från frames till divboxar. Har en sida med tre kolumner. I mitten finns själva innehållet (#content). Den ska ju styra hur höga de andra ska vara, så de går ända ner!

De andra är vänstermeny (#menu), kantbild (#edge) och en osynlig ram runt allt (#container).

Sidan finns nedan, är väl enklast att länka bara:
http://dannesholk.se/test.html

Hur gör man så den blåa och orange går ända ner?!

Jag brukar numera använda

display: table

och dess släktingar, och sedan trixa lite (javascript eller sätta fast bredd och falla tillbaka till "faux columns" eller ett "display: inline-block" hack) för IE7 och IE6 som är typ de enda vanligare webbläsarna som inte hanterar display:table m.fl...

Orsaken att det inte funkar, är att en dynamisk höjd kräver höjdvärdet "auto" på containern, 100% av "auto" är i CSS per definition lika med "auto" - samtidigt som "auto"-höjden för en div per definition är höjden av dess innehåll (dvs inte relaterad till sin containers höjd)
... typ :bire

Jag brukar göra såhär:

div.holder {
overflow: hidden;
}
div.holder div {
padding-bottom: 9000px;
margin-bottom: -9000px;
}

Jag skapar en holder, som jag sedan lägger alla divs i:

<div class="holder">
<div id="1">
</div>
<div id="2">
</div>
</div>

Det gör så att alla divs får samma höjd, vet inte exakt hur det funkar, men funkar gör det.

The EqualHeights jQuery Plugin om du vill ta hjälp av jQuery!

grymt! Tack för svar! det där tricket med att lägga in ännu en div som innesluter allt och har +-9000 i botten funkade ju kanon! Det är sånt här som är så underbart när man kodar :)
http://dannesholk.se/test3.html

...det verkar lite buggigt att göra sådär. Kolla nedan, där går inte högra div-en ner. Sedan på två sidor går inte allt längst ner om man har så stort fönster så allt får plats.
http://dannesholk.se/misc.shtml
har försökt få till det med display:table men det är ju inte det lättaste att hålla på med heller :(

du har inte lagt till någon div som heter "containerhack" i misc.shtml.

Annars tycker jag du kan sätta edge som fixed. Det skulle vara ganska snyggt tror jag.

Danny skrev:

har försökt få till det med display:table men det är ju inte det lättaste att hålla på med heller :(

Det såklart - man får ju både för- och nackdelarna med tabellbaserade layouter med den tekniken och det gäller att ha koll på table-layout:fixed, höjd- och breddfördelning inom tabellen osv...

noshornin skrev:

du har inte lagt till någon div som heter "containerhack" i misc.shtml.

just det, tog bort den när jag höll på att testa allt som gick :) Nu har jag lagt tillbaka "containerhack". Det är bara på denna sida och musik som content och edge inte går ända ner vid stort fönster, men jag har skärmarna 90-grader tiltade och det syns bara om fönstret är typ 1600 högt. Det lär inte vara många som kommer se det där, får nog vara sådär tillsvidare nu.

noshornin skrev:

Annars tycker jag du kan sätta edge som fixed. Det skulle vara ganska snyggt tror jag.

försökte, men då hoppade hela edge ner :) verkar som fixed ställer till det lite, fick lägga på en marginal på content när jag lade fixed på menu för att ordna den sidan.

jarvklo skrev:

Det såklart - man får ju både för- och nackdelarna med tabellbaserade layouter med den tekniken och det gäller att ha koll på table-layout:fixed, höjd- och breddfördelning inom tabellen osv...

nu har jag provat lite igen, verkade funka:
http://dannesholk.se/test4.html
återstår att se om det funkar lika bra om en stund :)

Problemet löst

Ja jag hoppas det iaf, display:table uppför ju iaf sig som folk bara man vet hur man ska tämja den! Har nu gjort en skarp testsida med fixed cells:
http://dannesholk.se/test5.html

... Plus att du inte bör glömma att det fortfarande behövs en fallback för IE7...

Jag använder nästan alltid faux columns för sånt här, det är enkelt och fungerar i alla läsare.

http://www.alistapart.com/articles/fauxcolumns/

...fauxar kollade jag på också. Fick inte till det riktigt. Verkar ju bra dock, får kolla på det om det inte funkar med display:table. Alistapart är riktigt nice sida för övrigt.

jarvklo: mmm, jobbigt. Det var nån kod med css för det som jag inte fick med. Får kolla på sedan när jag börjar jobba och kan kolla med massa olika bläddrare.

Tack!

Ja, vad skall man säga för att sammanfatta...

Icke-fastbreddslayouter i enbart CSS är fortfarande "the holy grail of webdesign" och kräver en massa hack...

"faux colums" är fördj***a när det gäller annat än fasta kolumnbredder...

Tabellayouter har sina egenheter (speciellt kanske om man måste fylla hela fönsterhöjden så att en sidfot hamnar i nederkant även när innehållet inte fyller ut höjden)

Javascriptanpassningar av höjd funkar, men är inge bra om man vill att layouten skall funka även utan scripts (och om man skall bygga sidir som kräver scriptstöd eller ej är i sig en intrikat fråga men det är en annan debatt)

Jag tror den här tråden innehåller det mesta du kan hitta numera i principväg...

Resten beror av detaljer i den layout du siktar på ( och vad du kan leva med i kompromissväg )

Lycka till. :bire

Nate.A skrev:

Jag använder nästan alltid faux columns för sånt här, det är enkelt och fungerar i alla läsare.

jag kollade lite närmare på det där och hittade en kod att utgå ifrån som dessutom var gjord för att funka överallt. Fick ihop något som verkar lovande:
http://dannesholk.se/test13.html

...nu ska jag bara prova om den fungerar i alla webläsare

/red: bakgrunden flyter runt när man förminskar fönstret så det är smalare än innehållet! :( ...lite pyssel kvar med detta alltså...