HTML 使用固定标题和底部和可滚动内容的弹性盒子布局

在本文中，我们将介绍如何在 HTML 中使用弹性盒子布局（Flexbox）来创建一个具有固定标题和底部以及可滚动内容的页面。

阅读更多：HTML 教程

弹性盒子布局（Flexbox）简介

弹性盒子布局是一个用于 CSS 中的模块，它提供了一种灵活的布局方式，可以方便地对容器中的项目进行定位和调整大小。使用弹性盒子布局，我们可以轻松地实现动态和响应式的页面布局。

弹性盒子布局主要由容器和项目组成。容器是包含项目的父元素，而项目则是被布局的子元素。项目可以随着容器的大小调整而自动调整位置和大小。

创建固定标题和底部

为了创建一个具有固定标题和底部的页面，我们可以使用 HTML 和 CSS 结合弹性盒子布局来实现。首先，我们将创建一个包含标题、内容和底部的容器。

<div class="container">
  <header>固定标题</header>
  <main>可滚动内容</main>
  <footer>固定底部</footer>
</div>

现在，我们将为这个容器添加一些样式来实现固定的标题和底部。

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

header, footer {
  background-color: #f5f5f5;
  padding: 10px;
}

main {
  flex-grow: 1;
  overflow-y: auto;
}

在这个例子中，我们使用弹性盒子布局将容器的方向设置为纵向（column），以便让标题、内容和底部垂直排列。通过设置容器的高度为 100vh，我们可以使容器的高度与视口的高度一样，从而实现整个页面的滚动。

同时，我们给标题和底部添加了一个背景颜色和一些内边距，以便使它们在页面中更加醒目。而内容部分则使用了 flex-grow: 1 来让其占据剩余的空间，并通过 overflow-y: auto 实现内容的纵向滚动。

现在，我们已经创建了一个具有固定标题和底部的容器，并且内容可以进行纵向滚动。

示例演示

为了更加直观地演示这个效果，我们可以在页面中添加一些内容，然后预览整个页面的布局。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <style>
    /* 页面样式 */
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>固定标题</header>
    <main>
      <h1>欢迎来到我们的网站！</h1>
      <p>这是一个示例页面，用于演示如何使用弹性盒子布局创建具有固定标题和底部以及可滚动内容的页面。</p>
      <p>请随意滚动以查看页面的整体布局。</p>
      <!-- 添加更多内容以演示页面布局 -->
    </main>
    <footer>固定底部</footer>
  </div>
</body>
</html>

在上面的示例代码中，我们将所有的 CSS 样式放在了外部样式表（styles.css）中，并在 HTML 文件的 <head> 部分引入该样式表。