内部 DIV 未扩展到 100% 高度

Question

我有几个页面似乎会导致一些相互矛盾的结果。我有一个登录页面应该有一个灰色的背景，然后我的内页有一个白色的背景。 但是 id="loginPage" 的 div 不会拉伸“容器” div 的整个高度。因此 loginPage div 是灰色的，但容器 div 的剩余空间仍然是白色的。

现在，主容器有一个最小高度，因为我有几个页面包含大量内容。当我将其设置为仅高度：100% 时，页脚不在页面底部。但是一旦我将它设置为最小高度，它就会下降到页面的底部。

这是我的 CSS：

html, body { height: 100%;}

#loginPage {
    width:100%;
    height:100%;
    float:left;
    background-color:#F7F7F9!important;
}
    #container
{
    min-height:95%;
    position: relative;
    background:white;
}
.footerBg
{
     width:100%;
     padding-top:10px;
     margin:0;
     position:relative;
}

和html：

<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">

Answer 1

我想你可能想看看这个：http://ryanfait.com/sticky-footer/

它解释了如何使页脚始终位于页面底部，即使内容较小，并且如果滚动条不是必需的，它也不会添加滚动条。然后，您可以将“灰色”背景颜色添加到页面包装器中。

Answer 2

如果您想将网页的高度设置为百分比，您可以 必须设置您想要的每个父元素的高度 高度已定义。

来源：http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

尝试给form { height: 100% }

看看这个fiddle，我清理了你的html和css