CSS Div 100%页面高度的延伸

在本文中，我们将介绍如何使用CSS将DIV元素的高度延伸到100%页面高度。在网页设计中，有时我们希望一个DIV元素的高度可以始终延伸到整个页面的高度，即使内容少时也能填满整个屏幕。下面是一些示例和方法，让我们来看看吧。

阅读更多：CSS 教程

方法一：使用绝对定位

我们可以使用CSS中的绝对定位来实现DIV元素的高度延伸。首先，我们需要将页面的高度设置为100%：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

接下来，我们可以使用绝对定位将DIV元素置于页面的顶部和左侧，并设置其高度为100%：

.div-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

这样，无论DIV元素的内容有多少，它的高度都会自动延伸到整个页面的高度。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Div Stretch</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .div-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="div-container">
    This is a div element with 100% height stretch.
  </div>
</body>
</html>

方法二：使用Flexbox布局

另一种常用的方法是使用Flexbox布局。我们可以设置一个父容器，将其高度设置为100%并使用Flexbox布局，然后将DIV元素的高度设置为100%：

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.div-container {
  flex: 1;
  background-color: lightblue;
}

在上述代码中，我们将父容器的高度设置为100vh，该单位表示视口的高度。接下来，我们使用Flexbox布局并将DIV元素上的flex属性设置为1，这将使其自动填充剩余空间。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Div Stretch</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .div-container {
      flex: 1;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-container">
      This is a div element with 100% height stretch.
    </div>
  </div>
</body>
</html>

方法三：使用Grid布局

另一种常用的方法是使用CSS Grid布局。我们可以设置一个父容器，并将其高度设置为100%，然后使用Grid布局将DIV元素放置在网格中：

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100vh;
}

.div-container {
  background-color: lightblue;
}

在上述代码中，我们将父容器的高度设置为100vh，并使用Grid布局将DIV元素放置在网格中。DIV元素的高度将自动填充整个网格。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Div Stretch</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: grid;
      height: 100vh;
    }

    .div-container {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="div-container">
      This is a div element with 100% height stretch.
    </div>
  </div>
</body>
</html>