1

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

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

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

这是基本标记：

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

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

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

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

4

3 回答 3

1

为了使“内容”的高度为 100%，您必须同时设置高度和html内容的高度。body100%min-height100%

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

于 2013-03-02T16:20:49.570 回答
0

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

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

于 2013-03-02T16:15:37.813 回答
0

试试这个作为页脚

位置：固定；

底部：0 ;

无论滚动在哪里，页脚都将始终可见。

于 2013-03-02T16:10:12.270 回答