可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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

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

Not working example and Working Example

Your question's fiddle

And its output, It works fine on browser resizing

回答2:

You almost had it. I simply revised the CSS of the first three selectors as follows:

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#main {
    margin: auto;
    min-height: 100%;
    background: #ccc;
    width: 960px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

I only added the background, width and borders to the #main selector to show it working. It will work without those properties however the margin and min-height are necessary. You will also notice how the !important value is unnecessary and as a best practice should be used mainly for troubleshooting conflicts with inheritance.

I hope this helps.

回答3:

#main {

    height:100%;
    width:100%;
    margin:0 auto;
    padding:0;
    background:#fff;
    position:relative;

}

.header {

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

}

.allContent {

    position: absolute;
    top:145px;
    left:0px;
    right:0px;
    bottom:90px;
    width:100%;
    border:0 solid green;
    display:block;
    display:inline-block;
    overflow:auto;

}

#footer {

    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    background:url(../images/footer-repbg-320.png) bottom left repeat-x;
    height:90px;
    width:100%;
    display:block;
    display:inline-block;

}