如何使用 CSS 将 div 的高度设置为 100%

最新推荐文章于 2024-07-01 16:48:04 发布

qq_25153359

最新推荐文章于 2024-07-01 16:48:04 发布

阅读量371

点赞数 5

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_25153359/article/details/139335798

版权

答案：给父元素也设置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 相关问题解答

以下是与此主题相关的更多常见问题解答：

qq_25153359

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何使用 CSS 将 div 的高度设置为 100%

将 div 容器的高度设置为浏览器窗口的 100%，它不起作用，因为百分比 (%) 是一个相对单位，因此结果高度取决于父级元素的高度。元素的高度也设置为100%，结果容器div的高度就等于浏览器窗口的100%高度。div 有两个父元素：例如，如果您考虑以下示例，如果您尝试使用样式规则。
复制链接

扫一扫