Javascript Div占用全部空间
我希望我的页眉和页脚总是显示在顶部和底部分别无论屏幕分辨率，即只有主体应该包含滚动条 这是我的JSFIDLE：Javascript Div占用全部空间,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望我的页眉和页脚总是显示在顶部和底部分别无论屏幕分辨率，即只有主体应该包含滚动条 这是我的JSFIDLE： 这是标题 ... 这是页脚 我只希望红色部分占据滚动条（与屏幕分辨率无关）。因此，它也应该适用于Ipad或IPhone。我试图给红色部分100%，但滚动条的另一端不可见。因此，页脚和正文似乎是重叠的。有人能帮我吗？关键是职位属性。 试试这个： <!DOCTYPE html> <html> <head></head>
这是标题
...
这是页脚
我只希望红色部分占据滚动条（与屏幕分辨率无关）。因此，它也应该适用于Ipad或IPhone。我试图给红色部分100%，但滚动条的另一端不可见。因此，页脚和正文似乎是重叠的。有人能帮我吗？关键是职位属性。 试试这个：
<!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>
这是标题
...
这是页脚
<!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>
这是标题
...
这是页脚
我想说的问题是，如果你对你的内容与页脚重叠感到高兴，那么你试图实现一些很容易做到的事情的方式 使用
位置：固定在页眉和页脚上，然后您可以实现固定页眉和页脚的愿望。然后，您只需要像平常一样滚动内容
为了偏移页眉和页脚，以便我们可以看到它下面的内容，我们只需在正文的顶部和底部添加一个边距。在这种情况下，它是：
body { margin: 60px 0; }
这也适用于移动设备
我总是建议开发人员利用浏览器已经做的事情，而不是试图用脚本/技巧模仿默认行为
这种开发方式会增加您的开发时间，并且不能始终跨浏览器工作。如果浏览器停止支持某些脚本功能/方式，那么这样做也会导致网站寿命问题
我已经更新了你的提琴，向你展示了我的意思：我想说的问题是，如果你很高兴你的内容与你的页脚重叠，那么你试图实现一些很容易做到的事情的方式
使用位置：固定在页眉和页脚上，然后您可以实现固定页眉和页脚的愿望。然后，您只需要像平常一样滚动内容
为了偏移页眉和页脚，以便我们可以看到它下面的内容，我们只需在正文的顶部和底部添加一个边距。在这种情况下，它是：
body { margin: 60px 0; }
这也适用于移动设备
我总是建议开发人员利用浏览器已经做的事情，而不是试图用脚本/技巧模仿默认行为
这种开发方式会增加您的开发时间，并且不能始终跨浏览器工作。如果浏览器停止支持某些脚本功能/方式，那么这样做也会导致网站寿命问题
我更新了你的小提琴，让你明白我的意思：@Tsar:太棒了！！！！呜呜呜@沙皇：太棒了！！！！呜呜呜！！谢谢，但这看起来根本不对。滚动条出现在黑色部分，实际上是静态的。用户不希望滚动条上的东西会保持静态。看看沙皇的答案或这个链接：这正是我所期望的。谢谢，但这看起来根本是错误的。滚动条出现在黑色部分，实际上是静态的。用户不希望滚动条上的东西会保持静态。看看沙皇的答案或这个链接：这正是我所期望的。