CSS 如何使DIV的高度在页眉和页脚之间达到100%

在本文中，我们将介绍如何使用CSS使一个DIV元素的高度在页眉和页脚之间达到100%的效果，并提供一些示例来说明。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在很多网页设计中，我们常常遇到一个需求，即使一个DIV元素的高度在页眉和页脚之间达到100%。这意味着无论内容多少，这个DIV元素始终填满整个屏幕的剩余空间。然而，由于HTML和CSS的盒模型，以及浏览器对元素高度的计算方式，实现这一效果并不容易。

假设我们有一个简单的网页布局，其中包含一个页眉、一个页脚和一个位于页眉和页脚之间的内容区域。我们希望这个内容区域的高度始终占满整个页面的剩余空间。

HTML结构如下所示：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <title>CSS测试</title>
  <link rel="stylesheet" type="text/https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css" href="style.https://sotoolbox.com/tag/css target="_blank" rel="nofollow">css">
</head>
<body>
  <header>这是页眉</header>
  <div class="content">这是内容区域</div>
  <footer>这是页脚</footer>
</body>
</html>

方法一：使用绝对定位

一种常见的解决方法是使用绝对定位来实现。我们可以将内容区域使用绝对定位，并设置top和bottom属性来确定它在页面中的垂直位置。同时，页眉和页脚也需要使用绝对定位，并设置它们的高度，以便计算内容区域的高度。具体的CSS代码如下：

body {
  position: relative;
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background-color: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.footer {
  height: 80px;
  background-color: lightgreen;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  position: absolute;
  top: 100px;
  bottom: 80px;
  width: 100%;
  background-color: lightgray;
}

使用这种方法，我们可以确保内容区域的高度始终占满整个页面的剩余空间。然而，这种方法也存在一些问题。当内容区域的内容溢出时，它并不会自动滚动，因此需要额外的CSS样式来实现滚动条。

方法二：使用Flexbox布局

另一种更现代的解决方法是使用Flexbox布局。Flexbox是一种用于创建灵活的、自适应的布局的CSS模型。我们可以使用Flexbox来实现一个简单的网格系统，其中内容区域会自动填满剩余空间。

具体的CSS代码如下：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background-color: lightblue;
}

footer {
  height: 80px;
  background-color: lightgreen;
}

.content {
  flex: 1;
  background-color: lightgray;
}

这段代码中，我们首先将body元素的display属性设置为flex，以启用Flexbox布局。然后，我们定义了flex-direction为column，这意味着元素将按垂直方向排列。接下来，我们使用min-height: 100vh来确保页面的高度至少达到整个视口的高度，即使内容很少。然后，我们设置页眉和页脚的高度，并使用flex: 1来指定内容区域占满剩余空间。

使用Flexbox布局，我们可以轻松实现一个自适应的网页布局，无需使用复杂的绝对定位。