Bush Bush - 2 months ago 7
HTML Question

How to force a DIV to have height of specified percentage?

I have this HTML: (I want the header to be 15% of the screen height) Entire DOM tree up to the .header div are defined with height percentage. But the header div height only wrap it's content which is less than 15% of the screen.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title> </title>

</head>
<body onload="pageLoad();">
<div class="header">
</div>

<div id="TempDiv" style="visibility:hidden"></div>
<div class="page-body"> </div>
<div class="footer"> </div>
<script> $(".footer").load("footer.html");</script>
</body>
</html>


The CSS is:

html {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color:black;
background-image:url('../res/bg.png');
background-size:100% 100%;
background-repeat:no-repeat;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size:12px;
width:100%;
height:100%;
}

.body {
width:100%;
height:100%;
}

.header {
/*position: absolute; - this change the height as desired but other DIVs get up to undesired position */
margin-top:3%;
height:15%;
}

.page-body {
margin-top:3%;
/*min-height:40%;*/
/*border: solid thick white;*/
}

.about , .gallery, .events , .contact
{
height:100%;
width:100%;
/*border: solid thick green;*/
vertical-align:middle;
}

.footer {
/*border: solid thick white;*/
width:100%;
height:auto;
position: fixed;
bottom:4%;
text-align:center;
}

Answer

The problem is that you misspelled the css for the body. You are now setting the css for a non-existant body class.

/* Below was the problem */
body {
    width:100%;
    height:100%;
}