CSS：将Div的高度设置为100% – 像素

在本文中，我们将介绍如何使用CSS将Div元素的高度设置为100%或特定像素值。

阅读更多：CSS 教程

设置Div高度为100%

有时候，我们希望将一个Div元素的高度设置为其包含元素的百分比高度。为了实现这个目标，我们可以使用CSS的height属性，并将其值设置为100%。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

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

<div class="container">
  <div class="content"></div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个容器（container）Div，它有一个固定的宽度（300px）和高度（200px），背景颜色为浅蓝色。我们还在容器内部创建了一个内容（content）Div，并将其高度设置为100%，背景颜色为浅绿色。

这样，内容Div的高度将自动调整为与容器Div的高度相同。

设置Div高度为特定像素值

有时候，我们需要将Div元素的高度设置为特定的像素值，而不是百分比高度。为了实现这个目标，我们可以使用CSS的height属性，并将其值设置为所需的像素值。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  background-color: lightblue;
}

.content {
  height: 150px;
  background-color: lightgreen;
}
</style>
</head>
<body>

<div class="container">
  <div class="content"></div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个容器（container）Div，它有一个固定的宽度（300px），背景颜色为浅蓝色。我们还在容器内部创建了一个内容（content）Div，并将其高度设置为150px，背景颜色为浅绿色。

这样，内容Div的高度将被固定为150像素。