HTML5 page 100% height Issue

css html height

11,039

Click for Demo Set Html and body tag height:100%; and you can give maring:0; and padding :0; to body tag also just give wrapper div height:100%;

HTML

<html>
<body>
<div id="Wrapper">  
<div id="header">
    header
</div>     
<div id="content">
    content
</div> 
 <div id="footer">
    footer
</div>  
    </div>
</body>    
</html>

Css

html{
    height: 100%;

}
body{
 margin: 0;
    padding: 0;

    height: 100%;
}
#Wrapper{
        text-align:center;
        margin: auto;
     height:100%;

    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color:orange;

}
#header{
    height:10%;
   background-color:yellow; 
}
#content{
    height:80%;
   background-color:#4072b4; 
}
#footer{
    height:10%;
   background-color:green; 
}

Output

With out setting padding to body and html tag background image will not work

Not working example and Working Example

Your question's fiddle

Your example with background image

And its output, It works fine on browser resizing

11,039

Author by

Admin

Updated on August 12, 2022

Comments

Admin almost 2 years

I am trying to create a App page which will auto fit to the height. following in the HTML code used in the page

<div id="main" role="main">
<header class="header">
    <div class="allPageHeaderImg"></div>
    <div class="logo"><img src="images/logo-viva.png" alt="VIVAGREL Logo" /></div>
</header>
<section class="allContent">
    <div class="button-links-subpg">
        <ul class="buttons">
            <li><a href="#"><img src="images/graceButton.png" alt="cardiac-button" /></a></li>
            <li><a href="#"><img src="images/timiButton.png" alt="cardiac-button" /></a></li>      
        </ul>
    </div>
</section>
<footer id="footer">
    <div id="footerBg">
        <div class="footer-links">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">Back</a></li>
            </ul>
        </div>
    </div>
</footer>
</div>

The CSS used

html {
  height:100%!important;
  width:100%;
  padding:0;
  margin:0;
}

body {
  margin:0;
  padding:0;
  width:100%;
  height:100%!important;
}

#main {
  height:100%;
  margin:100%;
  margin:0 auto;
  padding:0;
  background:#fff;
}

.header {
  height:145px;
  width:100%;
  background:url(../images/header-repbg-320.png) left top repeat-x;
  display:block;
  display:inline-block;
}

.allContent {
  width:100%;
  border:0 solid green;
  height:100%;
  min-height:100%;
  vertical-align:middle;
  display:block;
  display:inline-block;
}

#footer {
  background:url(../images/footer-repbg-320.png) bottom left repeat-x;
  height:90px;
  width:100%;
  display:block;
  display:inline-block;
}

My problem is, the whole page is only consuming half of the height of the page leaving a awkward space below footer,

Question: How to make the contents auto fit itself to the height of the page?