[vco-systems]

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

[chrizz]

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å

[Björn]

raderat!

[Kaffe]

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

[martine]

Originally posted by vco-systems@Feb 12 2007, 10:21
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

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

[swan]

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.

Finns det något bra sätt att få höjden till 100% - (header + bottom)

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.

[FunTrix]

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?

[Kaffe]

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

[magic]

du kan använda CSS.

#fullheight{
height:100%
}

sen använder du id="fullheight"

jag *tror* det är tillåtet.

[Magnus_A]

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