CSS 粘性页脚 - 内容样式问题答案

【问题标题】：CSS sticky footer - problems with content stylingCSS 粘性页脚 - 内容样式问题
【发布时间】：2013-02-17 01:30:04
【问题描述】：

我正在尝试使用 CSS 实现粘性页脚。我意识到这是一个常见问题，因此我尝试了通过 Google 找到的各种解决方案。

但是，我发现的所有解决方案都没有完成我想要做的事情。我不仅希望页脚位于底部，而且我可以在页眉和页脚之间放置一个div，它占用了所有可用空间，即使没有足够的内容（想象一下，如果你放一个边框在#content 附近，无论内容有多少，它都应该从页眉一直扩展到页脚。）。

这就是解决方案失败的地方。任何一个“推”元素都会阻碍。或者，如果不破坏页脚或将页面宽度增加到 100% 以上，则无法将 div 设置为 100%。

这是基本标记：

<!DOCTYPE html>
<html>
    <body>
        <header>
            Header!
        </header>
        <div id="content">
            Content!
        </div>
        <footer>
            Footer!
        </footer>
    </body>
</html>

再一次，我已经没有想法让 CSS 做我想做的事了。我可能不会使用 Javascript。帮忙？

编辑：我希望标题具有动态高度。页脚不应始终可见。它应该像this 一样工作。

编辑 2：它应该看起来有点像 this，除了黑色区域应该一直延伸到页脚。

【问题讨论】：

标签： html css

【解决方案1】：

试试这个作为页脚

位置：固定；

底部：0 ;

无论滚动在哪里，页脚总是可见的。

【讨论】：

对不起，如果我不清楚，但页脚不应该总是可见的。

【解决方案2】：

最好的方法是为您设置top: HEADER_HEIGHT; 和bottom: FOOTER_HEIGHT; 的内容设置一个绝对的div

还要将 div inner 推到 100% 的高度，它的父级应该有一个 height 而不是 min-height。为防止将min-height 更改为height 出现问题，应添加overflow: visible;。

【讨论】：

是否可以使用动态标题高度？
你也可以把header放在这个div里面，在上面设置0。
我看不出与this 有什么不同。黑色部分应一直延伸到页脚。内容够大就好看了。
如果背景之类的东西很重要，你可以把它放在#container。无论如何，我正在尝试使用#inner
jsfiddle.net/GEbsq/2 在这里。我刚刚将min-height 更改为height 并添加了overflow: visible; 这工作相同，但使我们能够为孩子使用height: 100%;。

【解决方案3】：

为了使“内容”的高度为 100%，您必须将 html 和 body 都设置为 100% 高度，并将内容的 min-height 设置为 100%。

您还需要在内容的顶部/底部进行填充，以便页眉和页脚（绝对定位，以免与 100% 高度混淆以创建不必要的滚动条）。此填充要求您知道页眉/页脚的高度，但由于它们应该是静态的，因此您很可能会这样做。

最后，需要border-box作为内容的box-sizing，以防止填充添加到高度。

无论内容大小如何，这都有效。

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
#content {
    min-height: 100%;
    background-color: blue;
    padding-top: 50px;
    padding-bottom: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
}
header {
    height: 50px;
    background-color: yellow;
    position: absolute;
    width: 100%;
}
footer {
    position: fixed;
    background-color: red;
    height: 50px;
    bottom: 0;
    width: 100%;
}

在行动：

http://jsfiddle.net/s8gZB/2/

http://jsfiddle.net/s8gZB/1/

【讨论】：

我对我的问题进行了编辑，页脚不应始终可见，它应该像 this 一样工作。
@ryyst 更像这样吗？ jsfiddle.net/s8gZB/3（取消注释 JS 并再次运行以增加 #content 的大小
类似this，只是黑色部分应该一直延伸到页脚。
小提琴中的黑色部分也在页脚下方延伸（通过从页脚中移除红色背景颜色来显示）。我小提琴中的黑色部分不应该这样做，而是应该在页脚之前“停止”，并且它周围应该有一个蓝色的边距。
你永远不会这样做，哦伟大的主人！ ;)