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


i have html: (i want header 15% of screen height) entire dom tree .header div defined height percentage. header div height wrap it's content less 15% of 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; - change height desired other divs 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;     } 

the problem misspelled css body. setting css non-existant body class.

/* below problem */ body {     width:100%;     height:100%; } 

Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -