[CSS] Layer met scrollbar en 100% hoogte

[amphora]

Ik wil het volgende: Een pagina met bovenin een (menu)balk van 30 pixels hoog, de overige ruimte onder de balk moet scrollbaar zijn bij lange content.

Ik heb nu

code:

<div id="header">header</div>
<div id="scroll">Lange content die moet gaat scrollen</div>

Met de volgende CSS

code:

html, body { height: 100%; margin: 0px; }
#header { background-color: #FF0000; font-size: 24px; height: 30px; }
#scroll { background-color: #CCCCCC; overflow: auto; height: 100%; }

Het probleem is dus dat de scroll layer een hoogte krijgt van 100% van de totale innerheight dus je krijgt 2 verticale scrollbars omdat de scroll layer buiten het browserdeel valt. Hoe is dit op te lossen? Ik wil de header geen % hoogte geven maar die moet echt 30px blijven.
Volledige voorbeeld staat hier: http://www.amphora.nl/test/scrolldiv.html

[Joolee]

Als je het niet erg vind dat de normale scrollbalk van de browser wordt gebruikt en niet die in je layer kun je gewoon een fixed header gebruiken.
Daar zijn talloze voorbeelden van te vinden.

http://limpid.nl/lab/css/fixed/header
http://www.cssplay.co.uk/layouts/basics2.html
http://sceneone.nl/elements/voorbeeld3_fixed_header.htm

[amphora]

Joolee schreef op donderdag 17 juli 2008 @ 14:21:
Als je het niet erg vind dat de normale scrollbalk van de browser wordt gebruikt en niet die in je layer kun je gewoon een fixed header gebruiken.
Daar zijn talloze voorbeelden van te vinden.

http://limpid.nl/lab/css/fixed/header
http://www.cssplay.co.uk/layouts/basics2.html
http://sceneone.nl/elements/voorbeeld3_fixed_header.htm

Bedankt!
Het is niet de beste oplossing maar ik ben bang dat het niet anders kan. Ga dit maar eens proberen te implementeren. Nieuwe tips zijn nog steeds welkom .

[Verwijderd]

Voor zover ik weet kan het op nog 2 andere manieren:

Cascading Stylesheet:

html, body { height: 100%; margin: 0px; }
#header { position:absolute; background-color: #FF0000; font-size: 24px; height: 30px; }
#scroll { background-color: #CCCCCC; overflow: auto; height: 100%; }

Hierbij wordt de header boven #scroll geplaatst door absolute positioning.

Cascading Stylesheet:

html, body { height: 100%; margin: 0px; }
#header { position: relative; background-color: #FF0000; font-size: 24px; height: 30px; z-index: 2; }
#scroll { position:relative; background-color: #CCCCCC; overflow: auto; height: 100%; margin-top: -30px; z-index: 1; }
#scroll-padding { padding-top: 30px; }

Bij deze schuift #scroll onder #header door een negatieve top margin en een lagere z-index. Door in #scroll een div met padding-top:30px te zetten wordt de inhoud van #scroll weer 30px naar beneden geduwd zodat het onder #header terecht komt.

Groot nadeel bij beide oplossingen is dat de bovenkant van de scrollbar van #scroll achter #header verdwijnt. Ik denk dus dat fixed positioning een wat betere oplossing is (mits je het goed werkend krijgt in IE6). Als je het beide niet wil vrees ik dat je toch met óf percentages óf met vaste waarden moet gaan werken.

[Pkunk]

Voor ie6 zou je eventueel expressions kunnen gebruiken, maar da's wel een beetje vies linkje