CODEWITHSUNDEEP
htmlcssheight
Omar Shazly
Omar Shazly

Reputation: 93

HTML Body Height 100% - still Height in percent not working

I know this is a silly one..but setting the height of the html and body tags to 100% and adjusting padding and margin to 0 didn't fix it!

Divs are still not showing the correct height..instead only the height of its content.

Here is my code:

HTML

<!DOCTYPE html>
<html lang="e">
<head>
    <meta charset="utf-8" />

    <title>Musterportfoliovergleich</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="stylesheets/index.css" type="text/css">
    <!--<link rel="stylesheet" href="stylesheets/jquery.mobile.css" type="text/css">-->

    <script type="text/javascript" src="javascripts/jquery.js"></script>
    <script type="text/javascript" src="javascripts/jquery.mobile.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            console.log("Hello");
        });
    </script>
</head>

<body>
    <div id="pieChartCont1" class="container">
        Pie Chart Container 1
    </div>

    <div id="barChartCont1" class="container">
        <div id="barChartCont">
            Bar Chart Container
        </div>

        <div id="recBut">
            recBut
        </div>
    </div>

    <div id="pieChartCont2" class="container">
        Pie Chart Container 2
    </div>

    <div id="recCont" class="container">
        Recomendations Container
    </div>

    <div id="barChartCont2" class="container">
        Bar Chart Container 2
    </div>
</body>
</html>

CSS

html, body{
width:100%;
height:100%;
margin:0;
}

#pieChartCont1{background-color:red}
#barChartCont{background-color:green}
#recBut{background-color:blue}
#pieChartCont2{background-color:yellow}
#recCont{background-color:purple}
#barChartCont2{background-color:orange}

@media
only screen and (orientation:portrait){
.container{
    width:100%
}
#pieChartCont1{
    height:45%
}
#barChartCont1{
    height:10%
}
    #barChartCont{
        width:80%;
        height:100%;
        float:left;
    }
    #recBut{
        width:20%;
        height:100%;
        float:left
    }
#pieChartCont2{
    height:45%
}
#recCont{display:none}
#barChartCont2{display:none}
}

@media
only screen and (orientation:landscape) and (max-device-width:700px){
.container{
    height:100%;
    float:left;
}
#pieChartCont1{
    width:45%
}
#barChartCont1{
    width:10%
}
    #barChartCont{
        width:100%;
        height:80%
    }
    #recBut{
        width:100%;
        height:20%
    }
#pieChartCont2{
    width:45%
}
#recCont{display:none}
#barChartCont2{display:none}
}

@media 
only screen and (orientation:landscape) and (min-device-width:701px){
.container{
    width:50%;
    height:50%;
    float:left;
}
/*#pieChartCont1{}*/
/*#pieChartCont2{}*/
#recCont{
    clear:both
}
/*#barChartCont2{}*/
#barChartCont1{display:none}
}

I figured it out! The jQuery Mobile script was just messing with the view.

Upvotes: 4

Views: 8066

Answers (2)

bklimt
bklimt

Reputation: 1842

Take a look at flexible box layout. If you are trying to layout an app with panels at certain percentages of the height, it should work much better for you.

Upvotes: 0

Charles
Charles

Reputation: 4538

Setting percentages is iffy at best. In my experience I much rather prefer just to use a JavaScript function to get the page width and height, and set the div dimensions to pixels, not percents. Set ids to the HTML elements you would like to format and use document.getElementById to size them.

var container = document.getElementById("container");
var barChartCont = document.getElementById("barChartCont");
//...and so on...

var viewportwidth;
var viewportheight;

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

container.style.height = viewportheight+"px";
barChartCont.style.height = (0.8*viewportheight)+"px";
//and so on...
}

This function will get the height and width of the browser. Replace your tag with

<body onload="resize()" onresize="resize()">

and this function will be called when the page loads and called again every time the page is resized (to update the dimensions of the <div> or whatever HTML tag you're using.) In this way you'll have actual pixels for the dimensions, not percentages.

Try it and let me know if you have problems. I've used this script many times in my coding history, and it's become one of my favorites and most used.

Upvotes: 5

Related Questions