我的页面有 2 个区域：标题和内容。
header 应该 [当然] 固定在顶部，并且没有固定的高度，以及它下面的内容。
关键是如果内容区域溢出，我需要滚动它...例如：标题应该始终存在，但内容可以向下滚动，即您的浏览器窗口，条形始终位于顶部和页面滚动。
我正在使用 JS 在另一个页面中执行此操作，其中“页脚”具有固定高度，所以我可以说“嘿，内容，使用页面高度减去页脚高度”。
我可以只用 HTML+CSS 来实现，还是需要使用 JS？怎么做？
【问题讨论】：
标签： html css layout elasticlayout
应该这样做...
#header {
position:fixed;
}
【讨论】：
您只需要 CSS。以下代码将创建一个 100 像素高的页眉、一个 50 像素高的页脚和一个名为“内容”的 div，这些 div 将填充页面的其余部分。整个事情将占用视口内的所有可用空间。如果您调整浏览器窗口的大小，页面将相应缩放。
如果“内容” div 中有足够的内容，您将在其中获得一个滚动条。滚动条不会覆盖页眉或页脚的任何部分，它将位于“内容”div 内。
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
div#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
}
div#content {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 50px;
overflow: auto;
}
div#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
以不同的方式设置“左”和“右”可以使其仅占用一定数量的可用空间。
div#header {
position: fixed;
top: 0;
left: 20%;
right: 20%;
height: 100px;
}
div#content {
position: fixed;
top: 100px;
left: 20%;
right: 20%;
bottom: 50px;
overflow: auto;
}
div#footer {
position: fixed;
bottom: 0;
left: 20%;
right: 20%;
height: 50px;
}
使用上面的 CSS，整个内容将居中，并留出 40% 的水平可用空间。
【讨论】：
position: fixed 对我不起作用，因为我需要 IE6 支持。令人毛骨悚然，我知道，但许多公司仍然把这个东西给他们的低用户工人。这是一个网络邮件。 D=
设置标题高度会使这更容易，但最终，javascript 将帮助您完成您正在寻找的内容。基本上你需要知道用户屏幕的高度和标题的高度。从用户屏幕的高度中减去标题的高度，然后使用该值来设置内容的高度。
确保设置溢出：自动；获取内容的滚动条。
您在布局中使用 div，而不是表格，对吗？如果没有，请考虑进行更改。使用 div 的网页设计比表格设计更容易操作。
这个链接应该可以帮助你获取屏幕高度所需的特定 JS 属性：Here
【讨论】：