使 html 页脚占据正文的其余部分答案

【问题标题】：Make html footer occupy the rest of the body使 html 页脚占据正文的其余部分
【发布时间】：2012-04-14 12:15:05
【问题描述】：

所以我正在尝试编写我的网络应用程序的页脚，它占据了身体其余部分的高度。

图片：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 {}

有什么建议吗？

更新1：

这就是发生的事情：http://img1.uploadscreenshot.com/images/orig/3/8906391235-orig.png 当我设置时

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

更新2：

http://awesomescreenshot.com/0382hf1ff

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

【问题讨论】：

标签： html css height footer

【解决方案1】：

演示：JsFiddle

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

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

【讨论】：

你的意思是你想要这个？ jsfiddle.net/Mikey/RxMnU/3 还是页脚背景纹理重复了？ -> 在body 中将该纹理设置为background: url(...)。
你不明白...背景只用于页脚，必须重复它自己，不能有固定的高度，而是自动的。
在这个页面上缩小和放大：line25.com/wp-content/uploads/2010/blog-design-coded/demo/... 并检查页脚区域，这就是我需要它的工作方式我的布局。
如果内容高度+页脚高度小于窗口高度怎么办？在我的 JsFiddle 中，我给了页脚一个高度，因为我没有你的页脚背景图片并且页脚是空的。
这是我能做到的最好的。如果它仍然不是你想要的，我真的不明白你想要什么，那么我放弃:)。 jsfiddle.net/Mikey/RxMnU/4 或者试试粘页脚：ryanfait.com/sticky-footer

【解决方案2】：

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

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

【讨论】：

所以您不希望两侧的固定按钮低于页脚顶部？请更详细地描述您想要的内容。
在此页面上缩小和缩小：line25.com/wp-content/uploads/2010/blog-design-coded/demo/… 并检查页脚区域，这就是我需要它在我的布局中工作的方式。忽略侧面按钮，它们会在您滚动时向下或向上。在使用html, body{height: 100%} 和页脚高度相同的正常缩放时，页脚会像照片中一样延伸
我想我不明白你想要什么。您的屏幕截图看起来与您发布的示例网站一模一样。如果你还有身高：100%；设置在您的页脚上，您可以尝试删除它。也许那是你的问题。我在答案中发布的样式应该可以满足您的需求。
在我网站的截图中，没有缩小...这就是正常比例的显示方式
页脚将折叠，因为它上面的页面内容占用更多空间。向您的页脚和页面正文添加更多内容，它应该可以正常工作。您还可能在某处设置了高度，导致页脚向下延伸太远。

【解决方案3】：

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

100% Height Demo

这可以根据您的要求进行调整。

【讨论】：

感谢您提供的信息，我已经知道这个了。问题是我不想改变我当前的 html 代码