【发布时间】：2011-08-27 21:48:18
【问题描述】：
我有一个顶部固定的头部和底部固定的脚的 HTML 标记。脚不是固定的，但总是在视口的底部，如果浏览器调整高度，它应该在内容的正下方。在这种情况下，应该会出现一个垂直滚动条。滚动条应该从头部下方开始并在窗口底部结束。 我有以下标记和 CSS：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Scroll Test</title>
<style type="text/css">
html, body, #header
{
top: 0;
right: 0;
left: 0;
bottom: 0;
}
html, body
{
min-height: 100%;
width: 100%;
}
body {
overflow-y:hidden;
margin:0;
position: absolute;
padding: 0;
}
#header
{
position: fixed;
height: 120px;
z-index: 9200;
background: #555;
min-width: 945px;
}
.page_margins_scroller
{
height: 100%;
overflow-y:auto;
}
.page_margins
{
min-width: 945px;
min-height: 100%;
background: #888;
}
.page
{
padding-top: 120px;
}
#footer
{
background: #ccc;
}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="page_margins_scroller">
<div class="page_margins">
<div class="page">
<div id="main">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div id="footer">
Foot
</div>
</div>
</body>
</html>
我在使用此代码时遇到的问题，我请求您提供解决方案：
- 滚动条在头部后面
- 滚动条始终可见并且滚动一点点（可能是因为 100% 的内容高度
- 如果我将浏览器的宽度调整为低于 945 像素并向左滚动，则脚的宽度不是 100%（背景颜色为白色）[编辑] 对于这个问题，我们必须添加 min-宽度：945px； #footer [/edit]
- 在 IE7 中不起作用
我已经在 IE7、IE8、IE9 和 FF4 上进行了测试，我想让它在所有这些设备中都能正常工作，也许在 FF3.6 中也是如此。也许有人有一个简单的解决方案，希望没有 JavaScript。如果您愿意，您可以更改标记。
提前致谢 乔辰
【问题讨论】：