[CSS] Layout met min. height, wel oprekbaar

[pierre-oord]

He Tweakers!

In m'n vorige topic was ik druk bezig een table-layout XHTML compliant te maken: dit ging niet erg goed. Ik werd aangeraden toch echt eens naar DIV's te kijken, dat werd ook op het internet gezegd.

Na lang zwoegen kan ik uiteindelijk een layout in DIV's voor elkaar krijgen. Dit krijg ik voor elkaar:
Header
Content, rekt zich op totdat het scherm van de browser vol is. Bij overflow: scrolbar.
Footer

Wat ik echter wil, is dat bij weinig content: Footer onderaan browser, en content divje opgerekt totop de footer. Een mooi scherm vol dus.
En zodra de content zoveel info krijgt dat het er niet meer in past, wil ik geen scrolbar, maar dan moet de div oprekken, en de footer "buiten" het browservenster komen. Net alsof je een tabel dus volstopt met data.

Ik heb hier nu een dag mee bezig geweest, maar ik kom echt nergens heb echt alle posities geprobeerd, absolute, fixed, whatever, maar het wil me gewoon niet lukken. Misschien kan iemand met ervaring mij helpen?
Ook min-height geprobeerd, een container (terwijl ik in de veronderstelling was dat de body al een container was), maar ook dat helpt me niet

Om het je gemakkelijk te maken:
- Layout zoals ik het kan krijgen: http://nieuw.flexbouncer.com/index2.php
- ZIP file met HTML layout zoals hierboven: http://nieuw.flexbouncer.com/nieuwsite.zip

Bedankt alvast!!!

[Redshark]

http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

Daarmee moet je er wel uitkomen denk ik.

[pierre-oord]

Redshark,

Ik heb het volgens jou methode gedaan, maar zoiets had ik zelf ook al gedaan of met eerder google werk: het lukt nog steeds niet. Het actuele resultaat vind je als je even m'n pagina refreshed. Het opvallendste steeds; de footer staat 0px onderaan vanaf het scherm, maar de content, die veel groter is, komt er onderdoor! (Scroll maar naar beneden). Dit terwijl het contentdeel zou moeten meerekken. In een tabel, zonder XHTML ondersteuning, was dit een fluitje van een cent.

edit:

Oke, ik zie in hun voorbeeld dat het wel werkt, ook als ik hem helemaal vul. Iets moet er schelen aan mijn CSS, misschien is het de combinatie van zoveel div's en een linker en rechter "content" deel?

Ik zou het erg fijn vinden als je een korte blik wilt werpen op mijn CSS code! (Zie de ZIP file)

[ Voor 24% gewijzigd door pierre-oord op 16-07-2007 23:53 ]

[pierre-oord]

Dag allen,

Gister teruggekomen van vakantie, nu weer aan de slag met deze layout.

Het wil echter nog niet lukken. Hoewel ik nu een heel eind op weg ben, krijg ik het niet voor elkaar om naast de content div, een andere div te plaatsen die ook meerekt. Deze beide div's heb ik ook al eens in een nieuwe content div proberen te plaatsen, zonder succes. Zie het voorbeeld:
http://nieuw.flexbouncer.com/index2.php

Dit werkt wel:
http://nieuw.flexbouncer.com/index3.php

Iemand enig idee hoe ik de div met het loginmenu, rechts kan weergeven naast de content?

Nog iets vreemds: in het voorbeeld dat werd gegeven voor 100% hoogte, valt bij mij de laatste regel tekst weg. De oplossing van de auteurs lijkt te zijn om de content div een padding van 60px te geven op de bodem, op die manier word eventuele tekst niet onder de footer verstopt.

Toch voelt dit alles aan als het "misbruiken" van technieken om te krijgen wat je wilt. Heeft iemand misschien een voorbeeld met correct CSS gebruik, waarbij word bereikt wat ik zoek?

edit:
Op http://nieuw.flexbouncer.com/index4.php ook nog wat met "float" geprobeerd. Helaas wil het oprekken naar 100% dan niet meer werken. De 2 kolommen van de content en loginmenu lijken nu ook los te staan, als de een oprekt, rekt de ander niet meer mee.

wat'n probleem zo'n layout maken... als dit de vooruitgang van het web moet zijn.. tables in quirk mode werkten altijd prima en kostte 2 tellen werk om te maken, maar om een XHTML menu werkend te krijgen, is quirck-mode gelijk verdwenen...

[ Voor 26% gewijzigd door pierre-oord op 25-07-2007 02:55 ]

[Redshark]

Faux columns is denk ik wat je zoekt. Ik neem ff aan dat je het inlog boxje ook wilt laten meerekken?

Lees dit maar ff door:
http://www.alistapart.com/articles/fauxcolumns/
http://www.gigadesign.be/2006/03/faux-columns-maken/

BTW, het is misschien wat handiger als je je de content div' zoals je schrijft ook een id 'content' geeft, je noemt nu alles rowX etc, dat leest niet heel gemakkelijk.

[pierre-oord]

Redshark schreef op woensdag 25 juli 2007 @ 09:19:
Faux columns is denk ik wat je zoekt. Ik neem ff aan dat je het inlog boxje ook wilt laten meerekken?

Lees dit maar ff door:
http://www.alistapart.com/articles/fauxcolumns/
http://www.gigadesign.be/2006/03/faux-columns-maken/

BTW, het is misschien wat handiger als je je de content div' zoals je schrijft ook een id 'content' geeft, je noemt nu alles rowX etc, dat leest niet heel gemakkelijk.

Bedankt voor het idee, ik was dat idd al eens ergens tegengekomen. Het enige probleem is dat op index4.php, de kolommen geen minimum hoogte meer hebben zodat de pagina word gevuld, ook als er niet voldoende content in staat.

Faux columns is dus ook niet de oplossing: De content-kolom bevat soms gewoon weinig informatie, en moet toch de pagina vullend maken, net zoals de kolom ernaast. Het probleem is echter dat de footer niet wil opschuiven bij de faux columns tweak...

Ik heb deze optie gemaakt in de index4 zodat je het ziet met weinig tekst:
http://nieuw.flexbouncer.com/index4.php?smalltext

[ Voor 6% gewijzigd door pierre-oord op 25-07-2007 12:04 ]