Question

所以我试图对我的网络应用程序的页脚进行编码，它占据了身体其余部分的高度。

图片：http://img1.uploadscreenshot.com/images/orig/3/8906151296-orig.png

注意暗区下方的亮区，暗区应该占据所有区域。

我的一些HTML代码：

<body>
....
<footer>
    <hr>
    <ul id="footerContainer">
        <li class="right">
            <ul>
                <li>
                    <a href="" class="family-filter">Filtro Fami....</a>
                </li>
            </ul>
        </li>
    </ul>
</footer>
<script>...</script>
</body></html>

CSS：

....
#footerContainer {width: 90%; min-width: 525px; margin: 0 auto; position: relative;}
....

footer hr{ border: 0; height: 30px; background: url('../imgs/footer-top.png') repeat-x scroll; }
footer {
  background: url('../imgs/footer-bg.png') repeat scroll bottom;
  height: 100%;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow: auto; 
}
#footerContainer {margin: 0 auto; position: relative;}
#footerContainer li { display: inline;}
#footerContainer li .right {float: right;}
#footerContainer li a {}

有什么建议吗？

UPDATE1：

当我设置

时会发生这种情况：http://img1.uploadscreenshot.com/images/orig/3/8906391235-orig.png

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

UPDATE2：

http://awesomescreenshot.com/0382hf1ff

缩小并进入此页面：line25.com/wp-content/uploads/2010/blog-design-coded/demo / ...并检查页脚区域，这就是我需要它在布局上的工作方式。

Answer 1

这里有一个非常有用的100％高度演示：

100% Height Demo

可以调整以满足您的要求。

Answer 2

演示：JsFiddle

给予元素height: 100%意味着它占据了最近父母的100％高度定义。在这种情况下，您不知道页脚高度，因为内容的高度是可变的。

我不知道你的html结构的其余部分，但你可以给body一个白色背景颜色，内容div为深灰色。

Answer 3

执行此操作的最佳方法是将html和body元素的背景颜色设置为页脚的背景颜色。然后将内容区域的背景颜色设置为浅灰色。

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#content {
    background-color: silver;
}

使html页脚占据身体的其余部分

3 个答案: