Ich versuche, eine App-Seite zu erstellen, die automatisch an die Höhe angepasst wird. Folgen Sie dem in der Seite verwendeten HTML-Code

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

Das verwendete CSS

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

Mein Problem ist, dass die gesamte Seite nur die Hälfte der Höhe der Seite einnimmt und unter der Fußzeile ein unangenehmer Platz bleibt.

Frage: Wie wird der Inhalt automatisch an die Höhe der Seite angepasst?