Variabele div hoogte via CSS en javascript
Het duurde flink wat tijd en het combineren flink wat Google en van een aantal concrete ideeën (link, link, link). Maar uiteindelijk is het me gelukt om de hoogte van de viewport, de beschikbare ruimte binnen de browser, via een javascript door te geven aan een id binnen de pagina.
De id heeft vanuit de stylesheet al:content-wrapper {overflow: auto;} Hiermee zorg je ervoor dat als de beschikbare ruimte, zowel in de hoogte als in de breedte (!) een scrollbar krijgt indien het niet meer past.
Vervolgens neem je de javascript. Dit laat je de hoogte ophalen van de viewport. Hiervoor kun je het script van QuirksMode gebruiken. Voor deze situatie is de breedte niet nodig, dus die halen we ook niet op. De hoogte prakken we niet in y maar in windowHeight.
Vervolgens nemen we een tweede functie die we een element uit de site laten halen via document.getElementById. Dit element geven we een style mee via element.style.height. Van de beschikbare windowHeight halen we wel nog even de hoogte van het menu. En we zetten er een grootte achter in px.
De tweede functie roepen we vervolgens telkens aan als de pagina wordt geladen of van formaat wijzigt.
Reageer
Reageren? Stuur een trackback (Zet Javascript aan om een Trackback URL te genereren ) of gebruik onderstaand formulier.