Menu
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?
993
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>
<body>
<div id="Wrapper">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
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;
}
With out setting padding to body and html tag background image will not work
Your question's fiddle
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
