[CSS] div maximaliseren in hoogte

[maartenvdv737]

Ik probeer mijn div een hoogte van 100% van de viewport height te geven.
Height: 100% werkt bij mij echter niet goed. Daarom heb ik een tweetal functies geschreven die de hoogte detecteren en daarmee de layer een height in pixels geeft.

code:

    /* 
     * Set content height for different browsers
     */
     
    function getContentHeight(){
        var height;
        var ns=(document.layers);
        var ie=(document.all);
        var w3=(document.getElementById && !ie);

        if (ie){
            height = document.body.offsetHeight;
        }else if (ns){
            height = window.innerHeight;
        }else if (w3){
            height = self.innerHeight;  
        }
    
        return (height - 200);
    }

    /* 
     * Set content height for different browsers, minimum height is 380px
     */
     
    function setContentHeight(){
        var height = getContentHeight();
        if( height < 380){
            height = 380;
        }

        document.getElementById("right").style.height = height + "px";
    }

Het probleem is echter dat IE bij het resizen van de window geen andere height teruggeeft. Firefox doet dit bijvoorbeeld wel. Misschien gebruik ik niet de juiste variabelen..

Ik heb geprobeerd:

document.body.offsetHeight
document.body.clientHeight
document.body.innerHeight

Heeft iemand een idee hoe ik in IE de juiste height kan terugkrijgen, van zowel een geresized scherm als een full screen scherm?

[Cubix]

Het gaat prima als je dit in je css zet:

code:

body {
    margin: 0px; 
    padding: 0px;
    height: 100%;
    background-color: blue;
}
#idvanjediv {
    height: 100%;
    background-color: red;
}

[Verwijderd]

waarom wil je de div 100% hoog maken? ben jij ook niet op zoek naar: http://www.alistapart.com/articles/fauxcolumns

@ hieronder: ja, misschien moet die ook in de verkiezing

[ Voor 22% gewijzigd door Verwijderd op 02-12-2004 14:35 ]

[Cubix]

Verwijderd schreef op donderdag 02 december 2004 @ 14:32:ben jij ook niet op zoek naar: http://www.alistapart.com/articles/fauxcolumns

Dat is wel de link van het jaar binnen Webdesign & Graphics

[maartenvdv737]

Cubix schreef op donderdag 02 december 2004 @ 14:32:
Het gaat prima als je dit in je css zet:

code:

body {
    margin: 0px; 
    padding: 0px;
    height: 100%;
    background-color: blue;
}
#idvanjediv {
    height: 100%;
    background-color: red;
}

Dit heb ik geprobeerd. Het resultaat is helaas in de verschillende browsers nogal verschillend. Ik krijg het iig niet voor elkaar in alle browsers het content gedeelte van mijn site zo te maximaliseren dat de browser viewport zo goed mogelijk gebruikt wordt.

Ik kan natuurlijk een standaard height in pixels invoeren, maar dan krijgt iedereen een scrollbar, terwijl mensen met een hogere resolutie best het content gedeelte groter kunnen hebben.