我正在尝试将内容容器填充到高度的 100%，同时具有 30px 标题。但目前，内容容器大于 100%，导致滚动条。
代码
html {
padding:0;
margin: 0;
height:100%;
}
body {
padding:0;
margin: 0;
height:100%;
}
#header {
height: 30px;
background: black;
width: 100%;
position: absolute;
z-index: 2;
}
#container {
position: relative;
height:100%;
padding-top:30px;
background-color: #aaaaaa;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="header"></div>
<div id="container"></div>
</body>
</html> 演示：https : //plnkr.co/edit/48SJjl9dB7S7IiC8JLcP?p=preview
实现这一目标的正确方法是什么？如果可能的话，我什至更愿意将标题定位为“相对”而不是绝对的。但这可能是不可能的吗？
您可以尝试进行以下更改：
#container{
height: calc(100% - 30px);
padding-top: 0;
}
您可以删除position两个元素上的属性，因为static在这里工作得很好。
您正在将content元素设置为height: 100%这意味着它将占据父元素（body在本例中）可用的完整高度。但header也是 的孩子，body您给它的高度为30px. 100% + 30px 将超过可用的全高，因此你的滚动条。同样添加padding-top，只会增加这个多余的高度。
完整代码
#container{
height: calc(100% - 30px);
padding-top: 0;
}
html{
padding:0;
margin: 0;
height:100%;
}
body{
padding:0;
margin: 0;
height:100%;
}
#header{
height: 30px;
background: black;
width: 100%;
position: relative;
}
#container{
position: relative;
height: calc(100% - 30px);
background-color: #aaaaaa;
}