CSS 在页眉和页脚之间使用宽度100%的内容

在本文中，我们将介绍如何使用CSS代码在网页的页眉和页脚之间创建宽度为100%的内容。

阅读更多：CSS 教程

CSS 布局

在开始之前，让我们先了解一下CSS布局。CSS布局是指将网页中的元素（如文本、图像、表格等）放置在特定位置和大小的方法。常见的布局方式有浮动布局、定位布局、弹性盒子布局等。在本文中，我们将使用弹性盒子布局来实现宽度为100%的内容。

弹性盒子布局

弹性盒子是一种CSS3中的布局模型，它允许容器中的元素按照特定的规则布局。弹性盒子布局通过display: flex来创建一个弹性容器，然后可以使用flex-direction、justify-content、align-items等属性来控制子元素的布局方式。在本文中，我们将使用弹性盒子布局来实现宽度为100%的内容。

下面是一个使用弹性盒子布局的例子：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.header {
  background-color: #f1f1f1;
  padding: 20px;
}

.content {
  flex: 1;
  background-color: #ddd;
  padding: 20px;
}

.footer {
  background-color: #f1f1f1;
  padding: 20px;
}
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>页眉</h1>
  </div>

  <div class="content">
    <h2>宽度为100%的内容</h2>
    <p>这是页眉和页脚之间的内容，宽度为100%。</p>
  </div>

  <div class="footer">
    <h3>页脚</h3>
  </div>
</div>

</body>
</html>

在上面的例子中，我们创建了一个容器.container，它使用弹性盒子布局，垂直方向高度为100vh（视窗高度）。容器中包含三个子元素.header、.content和.footer，它们分别代表网页的页眉、内容和页脚。我们通过设置不同的背景颜色和内边距来区分这三个部分。

.content元素使用了flex: 1属性，表示它会尽可能地填充剩余的空间，即宽度为100%。这样，我们就实现了在页眉和页脚之间创建宽度为100%的内容。