<分区>
<分区>
我在处理 div 和百分比方面遇到了问题。我不明白如何扩展或设置 div，使其成为屏幕的完整尺寸。当我查看它时，它卡在浏览器的顶部。我该怎么办？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BasicArchitect</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div id="container">
<div class="header">
</div>
</div>
</body>
</html>
CSS
body{
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#container{
height:90%;
width:100%;
margin:auto;
background-color:white;
border-style: solid;
}
.header{
height:50%;
margin:auto;
background-color: red;
border-style: dashed;
}
最佳答案
将正文大小设置为 height: 100% 并没有真正做任何事情，除非您将 html 的高度也设置为 100%。您正在寻找的测量值是视口(viewport)高度，或简称为 vh。
您想将 body { height: 100% } 替换为 body { height: 100vh }
关于html - 使用 div 的高度百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43712075/