Página de HTML5 100% de altura problema
Estoy tratando de crear una página de aplicación que se ajuste automáticamente a la altura. Siguiendo en el código HTML utilizado en la 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>
El CSS utilizado
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;
}
Mi problema es que toda la página solo consume la mitad de la altura de la página dejando un espacio incómodo debajo del pie de página,
Pregunta: ¿Cómo hacer que los contenidos se ajusten automáticamente a la altura de la página?