gpt4 book ai didi

html - 定位标题元素以占据视口(viewport)的整个宽度,以及占据屏幕其余部分的 div 元素

转载 作者:太空宇宙 更新时间:2023-11-04 12:34:28 25 4
gpt4 key购买 nike

我在配置标题和 div 元素的位置属性时遇到问题。每当我尝试对齐标题以占据视口(viewport)宽度的 100% 和高度的 60px 时,就会出现问题。为了消除所有空白,我设置了 position:absolute 并设置了 left:0pxtop: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);

}

最佳答案

你想把内容的位置改成绝对的,不需要calc:

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

关于html - 定位标题元素以占据视口(viewport)的整个宽度,以及占据屏幕其余部分的 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27391875/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com