我需要内容 div 来“填充”页眉之后剩余的屏幕剩余部分。我想保留 wrapper 的填充和边距。使用绝对位置不起作用，因为内容 div 不再在视觉上嵌套在包装器中。 (如果绝对必要，标题 div 可以是固定高度，但我更希望它是动态的。)非常感谢。
* {
margin:0px;
padding:0px;
}
html,
body {
height: 100%;
}
#wrapper {
background-color:#eee;
margin:20px; padding:20px;
border: solid 1px #333;
}
#header {
}
#content {
background-color:red;
}
.
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
在这里 fiddle : http://jsfiddle.net/jHLhK/
最佳答案
将内容 div 的宽度和高度指定为 100%。
#content {
background-color:red;
width:100%;
height:100%;
}
100% 表示它将与周围元素的可用空间一样多。
或者您可能只希望 height 或 width 为 100%，具体取决于您的要求。
关于css - 内部 div 填充屏幕的其余部分(受包装边距和填充限制)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10818522/