0

我有几页似乎会导致一些相互矛盾的结果。我有一个登录页面应该有一个灰色的背景，然后我的内页有一个白色的背景。但是 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">
4

2 回答 2

1

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

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

于 2013-01-23T19:08:29.913 回答
0

如果要将网页上的高度设置为百分比，则必须设置要定义高度的每个父元素的高度。

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

尝试给予form { height: 100% }

看看这个小提琴，我清理了你的 html 和 css

于 2013-01-23T18:36:58.970 回答