📅 最后修改于: 2023-12-03 15:42:32.551000 🧑 作者: Mango
HTML（Hypertext Markup Language）是一种用于创建 Web 页面的标准标记语言。它由多个标记组成，每个标记都用尖括号括起来。HTML 标记通常被称为 HTML 元素。
在网页中，有时需要一个元素始终占据整个可视窗口的高度。这个元素可能是一个背景图片，或者是一个完整的页面导航栏。为了实现这个效果，可以使用 HTML 中的“高度 100%”属性。
在 HTML 中，为一个元素设置高度 100% 的方法取决于这个元素的父元素。如果父元素的高度未被指定，则子元素的高度为 100% 将无效。也就是说，如果想让一个元素的高度为 100%，必须先设置其父元素的高度。以下是一个简单的 HTML 模板，在这个模板中，我们将设置 body 元素的高度为 100%：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
html, body {
height: 100%;
}
.full-height {
height: 100%;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="full-height">这个 div 元素的高度为 100%</div>
</body>
</html>
上面的代码中，我们为 html 和 body 元素设置了高度 100%。这样，我们就可以在 body 中创建任意 div 元素，并将其高度设置为 100%。这里我们创建了一个 div 元素，并为其添加一个背景颜色。
除了利用高度 100% 实现元素占据整个可视窗口的效果之外，还可以使用 CSS 中的“顺风布局”（Windmill Layout）。
顺风布局是一种使用绝对定位实现的布局方法。在顺风布局中，子元素会自动适应父元素的大小。这样，就可以轻松地实现一个元素始终占据整个可视窗口的高度。
以下是一个简单的例子，展示了如何使用顺风布局实现一个始终占据整个可视窗口的 div 元素：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="full-height">这个 div 元素的高度始终为整个可视窗口的高度</div>
</body>
</html>
上面的代码中，我们为 html 和 body 元素设置了高度 100%，并为它们设置了 margin 值和 padding 值。然后，我们为 full-height 类定义了顺风布局，并为其设置了 position、top、right、bottom、left 属性和背景颜色。这里的 position 属性为 absolute，表示该元素的位置将相对于其最近的非 static 父元素进行定位。由于我们没有为 full-height 的父元素添加 position 属性，则 full-height 元素的父元素为 body，因此 full-height 元素将占据整个可视窗口的大小。
在 HTML 中，要让一个元素始终占据整个可视窗口的高度，可以利用高度 100% 或顺风布局；高度 100% 方法适用于元素的父元素高度已被指定的情况，而顺风布局则适用于父元素高度未被指定的情况。