我在从标题和div 元素配置位置属性时遇到问题。每当我尝试对齐标题以占据视口宽度的 100% 和高度的 60px 时，就会出现问题。为了消除所有空白，我设置position:absolute并设置left:0px和top:0px但是我还有一个div 元素，它应该占据屏幕空间的其余部分，两侧或上限为零空格，但指定标题的位置会使其脱离正常的页面流，并且我从尝试设置height:100%时得到不需要的结果。这是我到目前为止所拥有的链接。小提琴
<body >
<div id="header">
</div>
<div id="content">
<p>Hello world</p>
</div>
</body>
#header
{
position:absolute;
left:0px;
top:0px;
height:60px;
width:100%;
background-color:rgb(60,125,56);
}
#content
{
position:relative;
left:0px;
bottom:0px;
width:100%;
height:calc(100% - 60px);
background-color:rgb(45,45,54);
}
你想把内容的位置改为绝对，不需要计算：
#header {
position:absolute;
left:0px;
top:0px;
height:60px;
width:100%;
background-color:rgb(60,125,56);
}
#content {
position:absolute;
left:0px;
bottom:0px;
top:60px;
width:100%;
background-color:rgb(45,45,54);
}