Question

我有几页似乎会导致一些相互矛盾的结果。我有一个登录页面应该有灰色背景，然后我的内页有一个白色的背景。但是id =“loginPage”的div不会拉伸“container”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

内部DIV不会扩展到100％的高度

2 个答案: