我正在为一个新网站设计布局，但在使用 CSS 实现我想要的效果时遇到了一些困难。首先，我希望所有内容始终保持在当前浏览器窗口的 View 中，滚动在我的内容中而不是浏览器本身。我有一个最外层的 DIV，它作为居中显示的站点的“包装器”，具有设置的宽度，并且具有 100% 的 bowser 窗口高度。在其中我放置了一个 header ，所有这些在所有感兴趣的浏览器中都按预期工作。
但是，一旦我将我的实际内容 DIV 放入这个“包装器”中，我就无法将它定义为我想要的大小。如果我简单的给它margin或者padding来弥补我已经绝对定位的header，内容就会溢出，无法设置scroll。如果我尝试直接设置大小，我无法输入任何有效的值，因为边距/填充会增加大小，现在它会比当前浏览器窗口大，并溢出。
人们能想到我可以在包装器/内容 DIV 上使用任何样式来获得所需的外观吗？ Here is a diagram illustrating the look I want.
最佳答案
以下假定您的页眉具有固定高度(不是百分比)。此示例使用 px 值来简化 Firebug 的检查，但它与 em 的工作方式相同。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin:0;
height: 100%;
}
#wrapper {
position:relative;
width: 400px;
height: 100%;
margin: 0 auto 0 auto;
}
#header {
position:absolute;
margin-top:0;
height: 70px;
width: 400px;
background-color: #ccc;
}
#content {
position: absolute;
top: 70px;
bottom: 0;
width: 400px;
overflow: auto;
background-color: #99c;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content<br/>
Content
</div>
</div>
</body>
</html>
重要的一点是，#content 根本不使用 height - 它使用 top 和 的组合>bottom 代替。
注意:我很确定，IE 6 需要进行修改...
关于html - 帮助内部内容框边距/填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2535213/