Lay-out beeldvullend maken

door Bjorn Simmering · 11 april 2007

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="nl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Untitled</title> </head> <body data-rsssl=1> <div id="kop"> Lorem ipsum </div> <div id="midden"> Dolor sit amet consectetuer adipiscing elit. Quisque suscipit congue leo. Morbi eget quam. Maecenas vehicula leo a nisl. Curabitur nec felis. Suspendisse id lectus. Morbi ultrices porta nibh. Sed quis nunc eget urna ultrices tincidunt. Vivamus laoreet, mauris fermentum viverra pellentesque, magna nulla nonummy lorem, ut volutpat sem nisl eu lorem. Mauris tristique ipsum sed nisl. Vestibulum consectetuer fermentum arcu. Aliquam erat volutpat. Nam vel justo. Suspendisse a quam id dolor fringilla malesuada. Duis non urna. Nunc nec metus. Quisque porta pharetra est. Phasellus ac enim. Proin eleifend condimentum tellus. Nam luctus magna vitae turpis. Proin feugiat, arcu at lobortis fermentum, enim lectus rhoncus est, sed feugiat libero libero eleifend eros. Fusce nisl pede, vestibulum eget, vestibulum quis, rhoncus eu, leo. Nullam at metus non est condimentum porta. In hac habitasse platea dictumst. Praesent ornare dui nec sapien. Nam faucibus. Fusce vel erat. Donec at ligula eu diam tincidunt bibendum. Aenean laoreet, diam vitae elementum ullamcorper, quam purus ornare libero, faucibus scelerisque ligula justo ac justo. Integer blandit. Nam euismod elementum ipsum. Donec eget nulla sit amet mi venenatis mollis. Mauris enim arcu, molestie quis, congue ac, faucibus eu, elit. Sed fringilla nisl et libero. Duis iaculis lectus a dolor. Sed tristique sapien quis metus. Nam vehicula arcu ac augue. Aliquam aliquam dui. Donec volutpat laoreet purus. Nunc vitae nisi. Nulla dictum leo id nulla. Fusce bibendum turpis eu quam. Etiam ornare tellus id quam. Vestibulum iaculis, metus ac laoreet tincidunt, libero mauris bibendum nibh, a eleifend leo nisi vitae libero. Suspendisse nec est. Sed nunc nibh, vehicula eget, interdum non, placerat a, enim. Curabitur ultrices, eros nec suscipit aliquet, sem velit vulputate turpis, ac pharetra nisi est in ligula. Duis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus enim mauris, tincidunt tincidunt, cursus eget, scelerisque sit amet, eros. Sed rutrum. Nulla posuere nisi eget est. Sed nunc eros, aliquet vel, ultrices sit amet, gravida vel, dui. Praesent ultrices tristique arcu. Quisque tempor. Sed tincidunt pretium turpis. Aliquam nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In fermentum suscipit sapien. Phasellus sagittis, purus semper porta tempus, felis pede semper turpis, sed suscipit sapien odio in velit. Nullam volutpat nisl semper est. Suspendisse iaculis ornare metus. Morbi lectus mauris, adipiscing ac, ultrices non, congue eu, nisl. Integer eget diam quis leo lacinia varius. Integer interdum sem et erat. Proin faucibus lectus nec nulla. Suspendisse potenti. Nulla diam lorem, condimentum faucibus, tristique vitae, elementum vel, metus. Suspendisse aliquet orci in lorem. Integer lorem dolor, lobortis non, nonummy sit amet, scelerisque et, neque. Phasellus pulvinar, est eget pretium venenatis, sem orci sodales mauris, in vulputate nisl tortor nec quam. Suspendisse euismod. Vestibulum a dui a orci aliquam pellentesque. </div> <div id="footer">©2006 html-site.nl – blabla</div> <script defer src="https://html-site.nl/wp-content/cache/autoptimize/js/autoptimize_352fb440faf097e04c5b839a8e6136c4.js"></script></body> </html>

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.

Lay-out beeldvullend maken

Geef een antwoord Reactie annuleren