100% hoogte met CSS

[Taro]

Veel sites gebruiken 100% hoge tabellen. Hierdoor zit de footer altijd aan de onderkant, kan je een header hebben en een deel dat de pagina uitrekt tot 100% als er niet genoeg content is.

In het kader van nooit meer tabellen gebruiken voor de layout van een site, maar alles in DIV's doen ben ik nu al een tijd bezig om een pagina met alleen DIV's 100% hoog te krijgen, waarbij er boven de 100% div een div met een vaste hoogte moet zitten en soms ook eronder, een footer dus. De laatste 2 zijn het probleem.

Ook zou het mooi zijn zoiets werkend te krijgen met een footer, alleen het probleem is dat die altijd absoluut gepositioneerd is, en dus eventuele content van een kolom erboven, erachter of eronder valt, ipv de footer naar beneden te drukken.

Natuurlijk heb ik een voorbeeld, http://www.xs4all.nl/~mlanphen/div/. Het gaat nu bijvoorbeeld om de linker balk. Deze staat op 100% hoog, maar omdat er een div van 40px boven zit, is hij 100% + 40 px hoog. Er komt dus een scrollbalk ipv dat die div zo hoog wordt als het overgebleven deel van de pagina.

Nu weet ik dat google er vol mee staat, op dit forum zijn er ook genoeg vragen over geweest en er zijn een aantal oplossingen. Vaak gaat het om een footer een negatieve marge enzo geven, dat wil ik voorkomen, uiteindelijk zorgt dit voor verminking van de kolom erboven. Een achtergrond met 100% hoog geven is eventueel ok, maar het zou toch anders moeten kunnen.

Dit alles moet als het kan in IE + FF en in Strict mode werken. Ik kan me niet voorstellen dat er zoveel mogelijk is op dit gebied, maar zoiets simpels onmogelijk lijkt te zijn.

[Osiris]

Probeer height: auto; anders eens?

[Taro]

Dat werkt niet, dan moet er content in om hem hoger te maken. Ik heb ook even een 2e versie gemaakt met footer, zie http://www.xs4all.nl/~mlanphen/div/index2.html, deze doet in FF ongeveer wat ik wil, in IE totaal niet.

[th3]

html {
height: 100%;
margin: 0;
padding: 0;
}
/* voor echte browser */
body {
min-height: 100%;
}

/* voor POS browsers (IE) */
* html body {
height: 100%;
}

[ Voor 18% gewijzigd door th3 op 17-06-2005 22:46 ]

[Taro]

Werkt ook niet, enige wat ik bereik is dat de pagina met de footer de linker en rechter kolom er nu achter heeft zitten, dit wil ik echt niet.

[ Voor 71% gewijzigd door Taro op 17-06-2005 22:52 ]

[Verwijderd]

Misschien heb je hier wat aan? In ieder geval voor je footer. Een header moet dan geen probleem zijn denk ik.

[JayVee]

Kijk eens op http://limpid.nl/lab/css/fixed/

[Taro]

Die van Seismic lijkt inderdaad te doen wat ik wil. Dit heb ik helaas wel vaker gedacht totdat ik ergens anders weer een divje ingooide en het gezeik weer terug was. De content verdwijnt niet achter de footer en de 1px IE bug is inderdaad weg. JayVee, thx, ik zal later kijken welke oplossingen daar staan.

[Verwijderd]

de volgende css declaratie werkt voor bijna alle tags:

code:

div {
height: expression(document.documentElement.clientHeight - 40);
}

of

code:

div {
height: expression(document.documentElement.clientHeight - 40)px;
}

gewoon in de css file opnemen external, internal of inline...maakt niet uit.
je moet maar even proberen welke het beste werkt.

het is niet echt pure html, maar het geeft veel extra mogelijkheden
ik hoop dat je er wat aan heb

mvg, dvdruit

[Taro]

Thx, er zullen altijd wel weer resultaten zijn dat het bij 1 site niet goed werkt, maar de basis is er nu in ieder geval

[TeeDee]

Misschien nog een "voorbeeld"
[rml][ css]header, 3 column, footer[/rml]
Is een topic van mij, met een ander probleem, maar dat is goed werkende code afaik.