Question

我在从header和div元素配置位置属性时遇到问题。每当我尝试对齐标题以占据视口宽度的100％和高度为60px时，就会出现问题。为了消除我设置position:absolute并设置left:0px和top:0px的所有空白区域，我还有一个div元素应该占用屏幕空间的其余部分，空白为零在边或上限但指定标题的位置使其超出正常的页面流量，并且在尝试设置height:100%时会得到不需要的结果。这是我到目前为止的链接。 Fiddle

<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);

}

Answer 1

您想要将内容的位置更改为绝对，并且不需要计算：

#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);
}

Position头元素占据视口的整个宽度，div元素占据屏幕的其余部分

1 个答案: