gpt4 book ai didi

html - 即使使用 100perc html 和正文,以百分比表示的 div 高度也不起作用

转载 作者:搜寻专家 更新时间:2023-10-31 08:24:57 24 4
gpt4 key购买 nike

我想使用不依赖于其中元素的百分比设置 div 高度。我在屏幕顶部有一个固定的标题和一个居中的 div。但是以百分比设置高度不起作用。只有当我在其中添加一些元素时它才会放大。

请帮忙。

我有这个代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>

还有这个 CSS

html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}

header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}

#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}

最佳答案

你也忘了让它的父级高度也为 100%。

#conteiner 默认有自动高度因为它的 div block 。默认高度是其子项的高度。如果未手动设置 parent 的高度,则浏览器将忽略 child 的高度百分比

#conteiner {
height: 100%;
}

关于html - 即使使用 100perc html 和正文,以百分比表示的 div 高度也不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40974062/

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