Lay-out beeldvullend maken
Vraag op het forum:
Ik krijg het “trucje” in CSS niet door om mijn layout verticaal beeldvullend te krijgen, ongeacht de monitor grote en/of resolutie.
Ik zal het (proberen) uitleggen aan de hand van een simpele layout:
De layout bestaat uit een “header” met daaronder een “tekstvlak” en daaronder een “footer”. Tot nu toe geen enkel probleem.
Maar nu wil ik de “header” helemaal bovenin beeld (in vaste maat) en de “footer” helemaal onder in beeld (in vaste maat),
met daartussen het “tekstvlak” wat de ruimte opvult ongeacht de hoeveel tekst wat daarin staat.
Wordt de tekst te veel voor de ruimte in het “tekstvlak” dan wil ik dat oplossen met de “overflow” functie in CSS.
Een opmaak in frames zou dit geen probleem zijn, maar nu zou ik dat graag in CSS maken.
Of is dit niet mogelijk in alleen CSS??
Deze vraag kwam naar voren op het forum. Hier het antwoord op deze vraag. Het probleem is namelijk dat wanneer je met behulp van
een ‘div’ de hoogte (height) op 100% zet dit niet lijkt te werken. Nu hebben we de zaak als volgt aangepakt. Eerst maar eens de
html pagina gemaakt.
Zoals je ziet een heel stuk tekst, maar dat is nodig om te testen of de overflow straks werkt.
Je ziet drie ‘divs’ staan, een kop voor de titel, een middenstuk en een footer voor de onderkant.
Wanneer je de pagina op deze manier publiceert wordt het een zeer saaie pagina, maar het past ook niet
in het beeldscherm. Daar gaan we wat aan doen. De stijl toevoegen.
Zoals je ziet wordt html en body op 95% gezet. Dit kun je ook op 100% zetten, maar in een aantal gevallen zie je dan
altijd een scrollbalk. De kop krijgt een paar stijlen mee waar we nu verder niet op in gaan. #midden krijgt een iets kleinere hoogte mee,
en de overflow functie scroll. Wat wil zeggen dat als dit percentage wordt overschreden er scrollbalken worden geplaatst.
Tenslotte de footer. Geplaatst met clear: both, zodat er aan beide zijden niets geplaatst wordt.
