Question

我正在尝试使用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，除了黑色区域应该一直延伸到页脚。

Answer 1

为了使“内容”达到100％的高度，您必须将html和body两者设置为100%高度，将min-height设置为{100% 1}}。

您还需要在内容的顶部/底部填充以便页眉和页脚（绝对定位以免混淆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/

Answer 2

试试这个页脚

职位：固定;

bottom：0;

无论滚动位于何处，

页脚始终可见。

Answer 3

最好的方法是为您设置div和top: HEADER_HEIGHT;

的内容设置绝对bottom: FOOTER_HEIGHT;

另外，为了使div inner的高度为100％，其父级应该有height而不是min-height。为防止问题从min-height更改为height，您应添加overflow: visible;。

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

3 个答案: