Página HTML5 100% de altura
Estou tentando criar uma página do aplicativo que se ajustará automaticamente à altura. seguindo no código HTML usado na página
<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>
O CSS usado
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;
}
Meu problema é que a página inteira está consumindo apenas metade da altura da página, deixando um espaço estranho abaixo do rodapé,
Pergunta: Como fazer com que o conteúdo se ajuste automaticamente à altura da página?