[HTML/CSS] Div stretchen binnen 100% container

[armageddon_2k1]

Ik heb me al helemaal lijp gezocht en al veel methodes geprobeerd, maar of het werkt niet voor IE6 of het werkt niet voor FF.

Ik moet het volgende design implementeren:


Het gaat hier om een site met een container die 100% hoog is. Daarin zitten een Header een middensectie en een Footer. Center is opgebouwd uit een Left, Center en Right. Op het eerste gezicht is dit niet heel erg moeilijk te bouwen, maar wat roet in het eten gooit is het feit dat de middenste div een 'overflow:scroll' moet hebben als het om een lange tekst gaat. Wat ik dan dus ook moet hebben is dat Center van tevoren al z'n maximale hoogte aanneemt, maar die verschilt uiteraard per computer. De hoogtes van Header en Footer staan vast.

Lieftst wil ik dit oplossen zonder Javascript, maar ik kan me voorstellen dat het onvermijdelijk is. Wat ik al gedaan heb:
- Header en Footer absoluut positioneren en Center onder Header plaatsen en een grote margin-bottom meegeven. Werkte niet in IE.
- Center een position: relative meegeven en dan top en bottom instellen. Werkt alleen in FF.
- De hoogte van Center bepalen a/d hand van screen.availHeight, maar dan eis je van de gebruiker dat ie gemaximaliseerd werkt, en...IE zit er 18px naast als ik hem goed wil krijgen.
- Bovenstaande waren met div's, dus ik heb uit wanhoop nog naar tables gekeken en die implementeerde IE helemaal goed, maar FF fout.

In principe moet het op te lossen zijn met een truc waar javascript kijkt om welke browser het gaat, maar ik wil het liefst dat het overal goed werkt met puur html+css. Ook wil ik graag dat het middenstuk 'liquid' is, dus de header en de footer niet van grootte veranderen bij het resizen.

Heeft er nog iemand tips?

[dB90]

Wat ik dan dus ook moet hebben is dat Center van tevoren al z'n maximale hoogte aanneemt, maar die verschilt uiteraard per computer.

Wat bedoel je dan met van tevoren? Als je die center heel simpel 100% height geeft is dus geen oplossing?

[Sebazzz]

Als ik het goed begrijp wil je min of meer zoals ik het op me website hebt gedaan (huisje onder mijn naam ) alleen dan naast de content nog een div?

Wel, ik heb me suf geschreven maar het lukte helaas niet om hij goed werkend te krijgen. Één keer was het me gelukt met overflow:scroll maar toen kreeg ik weer gezeik met allemaal andere elementen die weer niet wilden.

[armageddon_2k1]

dB90 schreef op dinsdag 16 oktober 2007 @ 20:55:
[...]

Wat bedoel je dan met van tevoren? Als je die center heel simpel 100% height geeft is dus geen oplossing?

Nee, want dan is de grootte in FF wel goed, maar in IE niet, die schiet gewoon door naar onder.

[dB90]

hoe bedoel je schiet naar onder? screenshot?

En in de CSS in je footer: clear:both; Helpt dat?

[ Voor 39% gewijzigd door dB90 op 16-10-2007 21:34 ]

[armageddon_2k1]

Met schiet naar onder bedoel ik dat als mijn scherm 500px hoog is dat #center dan ook 500px hoog zal zijn, ongeacht de grote van header of footer.

[Fuzzillogic]

CSS2 gebruiken. position: absolute, en dan top right bottom en left opgeven. Voor antiek kun je het IE7-script gebruiken, dan werkt deze oplossing ook gewoon.

[Verwijderd]

Fuzzillogic schreef op dinsdag 16 oktober 2007 @ 22:56:
CSS2 gebruiken. position: absolute, en dan top right bottom en left opgeven. Voor antiek kun je het IE7-script gebruiken, dan werkt deze oplossing ook gewoon.

Ik gebruik voor dit soort layouts altijd een techniek waarbij alles 100%x100% en absoluut gepositioneerd is. Daarna pas ik borders toe om de content naar de juiste plek te duwen. Werkt als een trein:
http://experiments.mennovanslooten.nl/2005/FlexLayout/2.html

[Fuzzillogic]

Verwijderd schreef op woensdag 17 oktober 2007 @ 06:58:
[...]

Ik gebruik voor dit soort layouts altijd een techniek waarbij alles 100%x100% en absoluut gepositioneerd is. Daarna pas ik borders toe om de content naar de juiste plek te duwen. Werkt als een trein:
http://experiments.mennovanslooten.nl/2005/FlexLayout/2.html

Zo heb ik het ook eens gedaan. Probleem is dat je hierbij IE in quirks mode moet gooien. Nou is IE in 'strict mode' al een irritant kreng, in quirks mode is het helemaal een Medusa. Ik gebruik deze methode dan iig ook niet meer.

[armageddon_2k1]

Verwijderd schreef op woensdag 17 oktober 2007 @ 06:58:
[...]

Ik gebruik voor dit soort layouts altijd een techniek waarbij alles 100%x100% en absoluut gepositioneerd is. Daarna pas ik borders toe om de content naar de juiste plek te duwen. Werkt als een trein:
http://experiments.mennovanslooten.nl/2005/FlexLayout/2.html

Bedankt voor je link, ziet er goed uit. Ik zal er eens naar kijken.

[Verwijderd]

Fuzzillogic schreef op woensdag 17 oktober 2007 @ 09:26:
Zo heb ik het ook eens gedaan. Probleem is dat je hierbij IE in quirks mode moet gooien. Nou is IE in 'strict mode' al een irritant kreng, in quirks mode is het helemaal een Medusa. Ik gebruik deze methode dan iig ook niet meer.

Klopt ja, IE moet dan inderdaad in quirksmode worden geforceerd. Nou heb ik daar zelf niet zo'n probleem mee maar dat is wel een nadeel aan deze methode.