Jag har en layout med 5 divar:

header
---------
l | c | r
e | e | i
f | n | g
t | t | h
. | r | t
---------
bottom


Jag vill att layouten totalt ska täcka hela sidan, och left, centr, och right ska vara lika långa.
Det fungerar "ganska bra" med att sätta height=100% på de tre kolumnerna, förutom att de får 100% av hela sidan. Finns det något bra sätt att få höjden till 100% - (header + bottom)? Eller ska jag göra det enkelt och använda table :)

Jag tror inte att height: 100% är ett "godkänt" attribut för en div. Det är ett problem det där och jag vet faktiskt inte om det finns en lösning på det med rena divs.

Är själv intresserad om nån har nått bättre förslag än just tables.

Edit: Lite google gav ju en del bra tips; http://www.webmasterworld.com/forum83/200.htm

Sätt height: 100% på body-taggen och prova med 100% på diven också

raderat!

Problematiken med Height är att det ärver av sin Parent.

I W3Cs standardläge så har Body ingen Height. 100% av ingenting blir alltså fortfarande ingenting. Så Chrizz-lösning är ett alternativ.

Ett annat alternativ är "faux-columns". Här är första exempelt från Google:
http://www.strictlycss.com/articles/articl...th-faux-columns

och, vad som kanske bör ses som "källan":
http://www.alistapart.com/articles/fauxcolumns/

Tänker också tillägga att hur mycket jag än förespråkar att använda CSS-styrd layout så är det är inte divarna som räknas utan separationen av presentation och innehåll. Tyvärr är det faktiskt näst intill omöjligt att genomföra en sann separation.

Om du håller i åtanke att det viktigaste i sammanhanget är just detta, plus källkodsordning för SEO och tillgänglighet, och användandet av korrekta rubriknivåer så kan du principiellt sett uppnå samma resultat med tabeller som med en "sann" CSS-styrd layout.

Personligen rekommenderar jag dock att du försöker hitta en lösning med DIV-element, det är om inte annat lite nyttig träning :rolleyes:

Liten fråga bara, vad har du för material på sidan som kräver att det är precis lika långa kolumner?

Jag har ett liknande problem, fast bara med en kolumn. Jag har ett sidhuvud och en content-del. Sätter jag body height till att vara 100% och sedan content-delen till att vara 100% då blir totalt sidan 100% + sidhuvudets höjd. Och sidhuvudets höjd vet jag inte på förhand.

Det jag alltså vill uppnå, vilket också verkar vara samma sak som trådskaparen, är att få en höjd som är 100% minus sidhuvudets höjd.

Jag tittade på fauxcolumns, och det löser inte problemet.

En fråga som kanske inte direkt hör hit men ändå gör det...
Jag har en connentent div med två divar i som har float left och de ska skiljas av med borders som ska vara lika långa som den längsta diven där i men det blir den kortaste slutar där den vill osv och nu undrar jag om det finns något annat sätt att lösa detta problem med än med fauxcolums?
det blir:
---------
| c | r|
| e | i|
| n | g|
| t | ---
| r |
----
som du ser vill jag ha den högra columnen att gå lika långt som den vänstra, eller tvärtom beroende på vilken som har mest text i sig och då var min fråga om det finns ett bra sätt att läsa detta på utan fauxcolums då det bara gäller borders som ska skilja av?

Jag tänkte slänga ihop ett eget exempel men Googlade lite snabbt och hittade: http://www.xs4all.nl/~peterned/examples/cs...csslayout1.html

Det redogör på ett ungefär den lösningen jag tänker föreslå: Definiera Height 100% för alla Parent-element (html, body, div#container, etc) och min-height för själva child-elementet. Eftersom IE tolkar height som min-height matas det explicit med height-attributet. Sedan placeras footer och header ut och nja, det exemplet redogör för det mesta.

Och som svar till funtrix: Personligen skulle jag använda faux columns. Mestadels därför att jag upplever det som den mest korrekta lösningen, många andra lösningar vållar fortfarande problem pg a stackars IE. Om du dock vill ha en CSS-baserad lösning så rekommenderar jag det här, ett ambitiöst projekt att hitta en korrekt lösning på (nästan) alla problem:
http://www.positioniseverything.net/articl.../onetruelayout/

Om du inte är nöjd med det finns Javascript, som hjälp på traven kommer första resultatet från min sökning på Google:
http://www.projectseven.com/tutorials/css/...lumns/index.htm

du kan använda CSS.

#fullheight{
height:100%
}

sen använder du id="fullheight"

jag *tror* det är tillåtet.

Problemet är egentligen inte lösbart med css och div:ar.
Man kan sammanfatta det som "hur kan jag i en div få information om en annan div:s höjd efter att den fyllts med innehåll och sedan använda det värdet för att sätta höjden på nuvarande div, och vice versa om den aktuella div:en skulle bli högre efter att ha fyllts med innehåll, hur kan den andra div:en hämta och använda det höjdvärdet."
Det blir en fråga om hönan och ägget. Om jag vet att div A _alltid_ blir högre så fungerar det. Men om jag inte vet från början vilken som blir högst så går det inte.

Det enkla svaret är: Strunta i konventionerna och använd tabeller. Där tas det hänsyn till alla höjder innan tabellen ritas upp. Det fungerar och alla användare blir glada och nöjda.
'
Till magic: Det fungerar bara om allt ryms på en skärmhöjd. Blir någonting högre än skärmen är höjden >100%.

Det går att lösa med CSS. Det är väl lite det som är poängen med att vi diskuterar överhuvudtaget.

Problematiken är att det verkar som om många här försöker jämföra äpplen och apelsiner. Div-element är inte Tabellceller. De är oberoende av varandra och unika element. Enbart som child-element kan de egentligen "ärva" egenskaper av varandra. Enda sättet för två unika element att ärva värden av varandra är att knyta samman dem med Javascript, eller emulera beteendet (faux-columns).

Du har däremot rätt i att tabeller är fullt användbara, vilket jag redan nämnt. Layout-tabeller förekommer i andra medier, det har dock svartmålats lite i och med CSS-P. Faktum kvarstår, om man lägger lite uppmärksamhet på tillgänglighet och kod-optimering är tabeller fortfarande fullt möjliga att använda.

Det är därför "sista" child-elementet ges min-height. Det är i viss mån en fungerande lösning.

Fungerar bara halvhyfsat vid resize dock, särskilt i Opera som inte ritar om ytan omedelbart.

Alltså gick det inte med CSS, utan endast via javascript. Case closed. Använd tabell.

Jag måste erkänna att jag kan inte "div" riktigt.. jag håller mig till oldschool tabeller.. skall nog lära mig divar någon gång..

Det är just därför som, lösningen inte är Javascript, utan att emulera beteendet med hjälp av CSS. Men, för all del, missförstå mig gärna.

Observera hur faux-columns implementeras (från: http://www.alistapart.com/articles/fauxcolumns/):
Det är, hör och häpna ett CSS-attribut. För den som inte orkar tänka: Faux-columns är en CSS-lösning.

Observera mitt andra inlägg i tråden, ifall du missade det: http://www.xs4all.nl/~peterned/examples/cs...csslayout1.html som förklarar hur man får något att vara 100% av fönstret i vertikalt led.

Men jag håller med dig, eftersom den ursprungliga frågan egentligen handlade om brist på kunskap så skulle jag givetvis rekommendera tabeller om tidsbrist är en aspekt. Annars skulle jag ta mig tid att åtminstone utforska ovanstående två exempel.

Här har du lösningen som inte är så avancerad som den ser ut. Jag har själv använt den flera gånger utan problem.

http://www.positioniseverything.net/articl...out/equalheight

Tack för svar.
jag har utforskat båda typerna av lösningar och funnit att de inte riktigt fungerar.
När det gäller fax-columns ska man veta att man inte får en div på riktigt utan bara något som ser ut som en div. Div:arna är fortfarande olika långa, det är bara det att man inte ser det.
Problemet är inte alltid att få något att vara 100 % av fönstret i verktikal led, utan att få något att bli lika långt som något annat
när man inte vet vilken av dem som kommer att bli längst .
Det kan röra sig om 75% av fönstret i vertikal led men kan lika gärna bli 175% av fönstret i vertikal led.

Då mitt problem skiljer sig från trådskaparens så gjorde jag en egen http://www.webmasternetwork.se/f12t19339.html.