CSS 如何创建填充头部和页脚之间所有空间的div

在本文中，我们将介绍如何使用CSS创建一个可以填充头部和页脚之间所有空间的div。这个技巧在网页设计中非常有用，可以帮助我们实现各种布局需求。

阅读更多：CSS 教程

问题描述

在网页布局中，我们常常需要将内容区域填充满头部和页脚之间的所有空间，无论页面的高度是多少。传统的解决方案通常是通过设置内容区域的高度来实现，然而这种方式对于响应式设计来说并不友好。

Flexbox布局

Flexbox布局是CSS3中的一个强大的布局模型，它可以非常方便地实现各种复杂的布局需求。在这个问题中，我们可以使用Flexbox布局来创建一个填充头部和页脚之间所有空间的div。

首先，我们需要为整个页面创建一个包裹容器，并设置其display属性为flex：

html, body {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

接下来，我们需要创建头部和页脚的div，并设置它们的高度。头部和页脚的高度可以根据实际需求进行调整。

<div class="container">
  <header class="header">
    <!-- 头部内容 -->
  </header>

  <div class="content">
    <!-- 页面内容 -->
  </div>

  <footer class="footer">
    <!-- 页脚内容 -->
  </footer>
</div>

然后，我们需要设置内容区域的flex属性为1，这样它会自动填充头部和页脚之间的所有空间。

.content {
  flex: 1;
}

最后，我们可以根据需要对头部和页脚进行样式调整，例如设置背景颜色、边框等。

.header, .footer {
  background-color: #f2f2f2;
  padding: 10px;
  border: 1px solid #ccc;
}

示例

下面是一个完整的示例，演示了如何使用Flexbox布局创建一个填充头部和页脚之间所有空间的div。

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

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

    .header, .footer {
      background-color: #f2f2f2;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .content {
     flex: 1;
   }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>这是头部</h1>
    </header>

    <div class="content">
      <h2>这是页面内容</h2>
      <p>页面内容可以根据实际需求进行设置。</p>
    </div>

    <footer class="footer">
      <p>这是页脚</p>
    </footer>
  </div>
</body>
</html>

在上面的示例中，我们使用了Flexbox布局来创建了一个填充头部和页脚之间所有空间的div。通过设置内容区域的flex属性为1，可以保证内容区域始终填充满剩余空间。我们还可以根据实际需求对头部和页脚进行样式调整，使其更符合设计要求。