0

无论屏幕分辨率如何，我希望我的页眉和页脚始终分别显示在顶部和底部，即只有主体应该包含滚动条。

这是我的jsfiddle：

http://jsfiddle.net/sfctB/7/

<!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%，但滚动条的另一端不可见。因此，页脚和正文似乎重叠。有人可以帮我吗？

4

3 回答 3

4

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
}
于 2013-01-25T11:54:07.933 回答
0

关键是位置属性。试试这个：

<!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>
于 2013-01-25T11:47:48.550 回答
0

我想说的问题是，如果您对自己的内容与页脚重叠感到高兴，那么您尝试实现可以​​轻松完成的事情的方式。

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

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

body { margin: 60px 0; }

这也适用于移动设备。

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

这种开发方式会增加您的开发时间，并且不能总是跨浏览器工作。如果浏览器停止支持某些功能/脚本编写方式，这样做也会导致您的网站寿命出现问题。

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

于 2013-01-25T11:59:03.770 回答