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
Post a Comment