Height 100%, scrollbar in div
Site zal bestaan uit een header en een footer.
Daartussen twee "kolommen". Links het menu en rechts de content.
E.e.a. vormgegeven met div's.
Nu loop ik tegen een probleem aan. Als mijn content te lang is voor het scherm, dan zou ik graag een scrollbar willen zien bij de content div. Wat er nu gebeurt is dat de pagina 'verlengd' wordt en er rechts een scrollbar verschijnt. Footer verdwijnt uit beeld.
Ik zoek het in overflow, maar dit werkt alleen als je een height aan de div meegeeft. En de hoogte is afhankelijk van het beeldscherm en verschilt dus per bezoeker.
Hoe kan ik een scrollbar toevoegen aan de content-div, zodat als er te veel content is, die verschijnt, maar mijn footer ook zichtbaar blijft?
Een voorbeeld-code staat op http://pastebin.com/dKQ0gVwk
Binnen de contentdiv kun je dan je kolommen plaatsen.
Je header en footer ook absoluut positioneren, header dus top: 0; en je footer dus bottom: 0;
Nu heb je binnenin je content gedeelte ( de hoogte is irrelevant, die heeft immers een top en een bottom ) en daar binnen in plaats je dus je menu div en je content div. Die content div krijgt een height: 100%; en een overflow: scroll; en als er nu een overflow plaats vindt, hoort ie alleen daar te scrollen.
Hoop dat het duidelijk is.
Kom ik op het volgende, waarom wil je dit? Want het is niet de meest gebruiksvriendelijke manier om een website op te zetten. Het breekt met de normale gang van zaken en gebruikers verwachtten waarschijnlijk wat anders op het moment dat je binnen een pagina moet scrollen.
Een nettere oplossing ( nog steeds niet optimaal ) is gewoon de normale gang van zaken aanhouden en je footer een position: fixed; mee te geven, op die manier blijft je footer altijd onderin het scherm zichtbaar en komt deze als het ware boven je content te "drijven". Geldt trouwens ook voor je header, die kan ook een position: fixed; krijgen.
Maar goed, nogmaals, het is niet de "gebruikelijke" gang van zaken dus ik zou zoiets alleen doen als je weet waarom je het doet en niet "omdat het cool is."
@Erwin: dat is inderdaad wat ik zoek.
$Merijn: je uitleg hoe het zou moeten werken is duidelijk (en komt overeen met de code van Erwin (als zit daar nog geen menu en content gedeelte in).
Jouw 2e oplossing had ik volgens mij al geprobeerd, maar dan kwam het een over het ander te staan, wat de leesbaarheid niet bevorderd.
Uit jouw redenatie begrijp ik dat het 'normaler' is om niet (meer) te werken met een scrollbar in een div, maar de hele pagina te laten scrollen.
Ga het uitwerken/overleggen.
Dank voor beide reacties.