CODEWITHSUNDEEP
htmlcss
Bush
Bush

Reputation: 2533

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;
    }

Upvotes: 1

Views: 2750

Answers (2)

bdalina
bdalina

Reputation: 523

My code works when I put HTML to 100% and put !important for header;

html 
{
    width:100%;
    height:100%;
}

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

.header
{
    15% !important;
}

Upvotes: 0

Sumurai8
Sumurai8

Reputation: 20737

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%;
}

Upvotes: 4

Related Questions