如何使用 CSS 将 div 的高度设置为 100%
主题:HTML / CSS
答案:给父元素也设置100%的高度
如果您尝试使用样式规则 height: 100%; 将 div 容器的高度设置为浏览器窗口的 100%，它不起作用，因为百分比 (%) 是一个相对单位，因此结果高度取决于父级元素的高度 。
例如，如果您考虑以下示例，.container div 有两个父元素:<body><html>height属性的默认值是auto，所以如果我们把<body>和<html>元素的高度也设置为100%，结果容器div的高度就等于浏览器窗口的100%高度。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 CSS 将 DIV 高度设置为 100%</title>
<style>
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="container">此 DIV 元素的高度等于其父元素高度的 100% 高度。</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
