CSS div 100% 高度

在本文中，我们将介绍如何使用CSS来设置div元素的高度为100%。

阅读更多：CSS 教程

CSS中的div元素

div是HTML中最常用的元素之一，用于创建容器来组织其他HTML元素。默认情况下，div元素的高度是根据内容的高度而定的。然而，有时候我们想要让div元素的高度充满整个屏幕或者父级元素的高度。

为了将div元素的高度设置为100%，我们可以使用CSS中的height属性。下面是一些常用的方法。

vh单位表示视窗高度的百分比。我们可以将div元素的高度设置为100vh来使其高度与视窗高度相等。

.div {
  height: 100vh;
}

这将使得div元素的高度充满整个视窗高度。然而，如果父级元素的高度不是100vh，那么div元素的高度仍只会占据父级元素的高度。

使用CSS的flex布局也可以实现div元素的高度为100%。我们可以将容器元素的display属性设置为flex，并将子元素的flex属性设置为1，使子元素平均占据容器元素的高度。

.container {
  display: flex;
}

.div {
  flex: 1;
}

使用绝对定位可以让div元素的高度相对于父级元素而言。我们可以将父级元素的position属性设置为relative，并将子元素的position属性设置为absolute，再将子元素的top、bottom、left和right属性设置为0来实现div元素的高度为100%。

.parent {
  position: relative;
}

.div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

请注意，使用绝对定位时，父级元素应该有一个非static的定位（relative、absolute或fixed）。

使用calc函数可以将div元素的高度设置为相对于父级元素高度的百分比。

.parent {
  height: 400px;
}

.div {
  height: calc(100% - 20px);
}

在上面的例子中，div元素的高度会自动计算为父级元素的高度减去20像素。

下面是一个结合上述方法的示例，展示了如何将div元素的高度设置为100%。请注意，示例中的样式会应用到所有具有class为”div”的元素。

<div class="container">
  <div class="div">Content 1</div>
  <div class="div">Content 2</div>
  <div class="div">Content 3</div>
</div>

.container {
  display: flex;
}

.div {
  flex: 1;
}

在上面的示例中，div元素的高度将根据容器元素的高度来分配，使其高度为100%。

通过使用CSS的height属性，我们可以轻松地将div元素的高度设置为100%。我们介绍了使用vh单位、flex布局、绝对定位和calc函数的方法。通过结合这些方法的不同特点，我们可以灵活地设置div元素的高度，以适应各种布局需求。希望本文对你理解如何设置div元素的高度为100%有所帮助。