HTML 设置 div 的高度等于屏幕尺寸

在本文中，我们将介绍如何使用HTML来设置div元素的高度等于屏幕尺寸。这可以帮助我们创建响应式的网页布局，确保在不同设备上都能够完美显示。

阅读更多：HTML 教程

1. 使用百分比高度

一种简单的方法是使用百分比来设置div元素的高度。我们可以将div的高度设置为100%，这样它就会占据整个父元素的高度。然后，我们可以使用CSS的position属性将其定位为相对或绝对布局。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  position: relative;
  background-color: lightgray;
}

.content {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: gray;
  color: white;
}
</style>
</head>
<body>

<div class="container">
  <div class="content">
    <h1>Hello, World!</h1>
    <p>This is a div with height equal to screen size.</p>
  </div>
</div>

</body>
</html>

在上面的示例代码中，我们创建了一个容器div和一个内容div。容器div的高度设置为100%，然后使用相对定位将内容div定位在上方，使其高度也达到整个屏幕高度。通过设置不同的背景颜色，我们可以清楚地看到div的高度覆盖整个屏幕。

2. 使用vh单位

另一种方法是使用CSS的视口单位vh（viewport height）。vh单位表示相对于视口高度的百分比。因此，我们可以将div的高度设置为100vh，使其高度等于整个视口的高度。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 100vh;
  background-color: lightgray;
}

.content {
  height: 100%;
  background-color: gray;
  color: white;
}
</style>
</head>
<body>

<div class="container">
  <div class="content">
    <h1>Hello, World!</h1>
    <p>This is a div with height equal to screen size.</p>
  </div>
</div>

</body>
</html>

在上面的示例代码中，我们只使用了两个div元素来创建一个与屏幕高度相等的div。容器div的高度使用vh单位设置为100vh，内容div的高度设置为100%以填充整个容器div。同样地，我们可以通过为不同的div元素设置不同的背景颜色来明显看到div的高度。