100% höjd css

Det här tror jag är ett ganska uttjatat ämne men jag lyckas inte få till det trots att ha läst många trådar om det här på forumet och på andra platser.

Jag vill ha en centrerad kolumn med en fast bredd som ska gå hela vägen ned. Min kod ser ut så här:

         #content {
            width: 700px; 
            height: auto;
            background-color: #fff;
            float: center;
            margin: auto;
            border: 20px solid #fff;
            text-align: left;
         }

         #page {
            height: 100%;
            background-color: #fff;
         }

html och body har också height: 100%
page-diven ligger inuti content, det finns även en header o footer med fast höjd.

Problemet är när innehåller i page-diven blir större än 100% av fönsterhöjden. Då följer inte den vita bakgrunden med hela vägen ned. Hur gör jag för att lösa detta?

Hittade en snygg lösning här: http://www.geekicon.net/geek/index.shtml/article/643
men den bygger på en flytande layout och jag måste ha en fast bredd på #content.

Det är min-height du är ute efter.
http://www.webforum.nu/showthread.php?t=127999

...får man fråga om länk för att se vad som inte stämmer?

Lyckas inte riktigt med min-height heller :/

Gjorde en förenklad version av css'en som ni kan se här:
http://www.endofart.net/slask/css.html

Du måste lägga in en clear för att ett flytande element ska fylla ut boxen som den ligger i.

#footer {clear:both;}

Förresten så finns det inget som heter float:center eller float:bottom...

float kan vara lite knepigt att förstå sig på... Att floata något left är något som egentligen anger att diven ska ge plats åt något annat på sin högra sida. Inte att den ska hamna längst ut åt vänster, även om den gör det om det inte finns något annat där. Så float bottom och float center finns inte som någon sagt förut. Float left är Idealiskt på din design om man då också anger bredder på det som ska komma under diven, som t.ex din footer.
Och med float så hänger bakgrunder med ner.
Jag gjorde om din design med float så som jag trodde att du ville det ska se ut.
Vill du att allt ska vara centrerad på sidan så får du lägga in det i en till div, förslagsvis osynlig.

Hm, tycker inte det blev någon större skillnad med din style. La upp den också:
http://www.endofart.net/slask/css2.html

I IE fungerar båda men det är i firefox kvarstår problemet att den vita bakgrunden inte sträcker sig hela vägen ned när innehåller blir större än fönstret.

float: center brukar fungera om man kör margin: auto men det kanske enbart beror på margin:auto ? Men det kanske inte fungerar i andra browsers? I IE räcker det med text-align: center på bodyn.

Gjorde även ett försök med clear: both på footern och det förbättrade en del:
http://www.endofart.net/slask/css3.html

Nu följer bakgrunden med hela vägen ned. margin-top på footern verkar nu ignoreras och tyvärr följer inte den röda högerkolumnen med hela vägen ned. Jag tror iofs att det här är tillräckligt bra för jag ska ändå ha vit bakgrund på de flesta lagren så det kommer inte synas att det är lite fel men det vore kul att lära sig hur man får det att fungera perfekt.

Konstigt... så här ser det ut hos mig...

M@rtin skrev:

tyvärr följer inte den röda högerkolumnen med hela vägen ned.

Den innehåller ingenting. Ska man få den att alltid hänga med till botten så får man ha en bakgundsbild i stället i content.

Mycket märkligt, vilken version av FF kör du?

Ja bakgrundsbild kanske är enda lösningen. Ska prova med det.

Jag tror du måste ha Doctype i dokumentet för att det ska fungera med FF.
Ett tips också när det gäller css. Validera lite då och då. Man hittar många fel då.

Jaa nu har jag fixat så det fungerar. Körde med bakgrund. Ska validera :)

Tack för all hjälp!