Question

我希望我的页眉和页脚总是分别显示在顶部和底部，而不管屏幕分辨率如何，只有主体应该包含滚动条。

这是我的jsfiddle：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="height:60px;background:#000;color:#fff;">This is header</div>
        <div style="height:100%;background:red;" id="red">...
</div>
        <div style="height:60px;background:#000;position:fixed;bottom:0px;width:100%;color:#fff;">This is footer</div>
    </body>
</html>

我只想要红色部分占用滚动条（无论屏幕分辨率如何）。因此它也应该在Ipad或IPhone中工作。我试图给红色部分100％，但滚动条的另一端是不可见的。因此，页脚和身体似乎重叠。有人可以帮帮我吗？

Answer 1

http://jsfiddle.net/sfctB/20/

html,body
{
    height:100%;
    width:100%;
    overflow:hidden;
}

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
}

.header
{
    height:60px;
    background:#000;
    color:#fff; 
    width: 100%;
    position: fixed;
    top:0;
}
.body
{
    overflow-y: scroll;
    height: 100%;
}

.footer
{
    height:60px;
    background:#000;
    position:fixed;
    bottom:0px;
    width:100%;
    color:#fff;
    bottom:0
}

Answer 2

关键是职位归属。试试这个：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="height:60px;background:#000;color:#fff; position: absolute; top: 0px;">This is header</div>
        <div style="height:100%;background:red;" id="red">...
</div>
        <div style="height:60px;background:#000;position:absolute;bottom:0px;width:100%;color:#fff;">This is footer</div>
    </body>
</html>

Answer 3

我想说的是，如果您对内容与页脚重叠感到满意，那么问题就是您尝试实现可以轻松完成的事情。

在页眉和页脚上使用position:fixed;，您就可以实现固定页眉和页脚的需求。然后你只需要像往常一样滚动内容。

要偏移页眉和页脚，以便我们可以看到它下面的内容，我们只需在主体的顶部和底部添加边距。在这种情况下，它是：

body { margin: 60px 0; }

这也适用于移动设备。

我总是建议开发人员使用浏览器已经做的事情，而不是试图用脚本/技巧来模仿默认行为。

这种开发方式会增加开发时间，并且无法始终跨浏览器工作。在浏览器停止支持某些功能/脚本编写方式的情况下，这样做也会导致网站的使用寿命问题。

我更新了你的小提琴，告诉你我的意思：http://jsfiddle.net/rnF9p/1/

Div占据了整个空间

3 个答案: