CSS 实现带有页眉和页脚的100%高度布局

在本文中，我们将介绍如何使用CSS实现带有页眉和页脚的100%高度布局。这种布局常见于网页设计中，能确保页面内容在任何情况下都能撑满整个屏幕。

阅读更多：CSS 教程

问题描述

在网页布局中，经常会遇到这样一个问题：如何让网站的页面在任何情况下都具备100%的高度，并且能够同时包含一个固定的页眉和页脚？这一问题看似简单，但实际操作时却不容易解决。

传统的网页布局方式使用表格或者使用绝对定位进行布局，但这些方法在不同设备上表现往往不尽人意。由于页面内容的高度不确定，而且可能存在浏览器窗口大小变化的情况，因此使得网页布局适配各种屏幕尺寸成为了一项具有挑战性的任务。

解决方案

使用CSS Flexbox布局可以简单解决这一问题。Flexbox是一种弹性盒子布局模型，能够以自动或者便捷的方式对容器中的元素进行布局。下面是一个使用Flexbox布局实现带有页眉和页脚的100%高度布局的示例代码：

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

    body {
      display: flex;
      flex-direction: column;
    }

    header {
      height: 50px;
      background-color: #f0f0f0;
    }

    main {
      flex: 1;
      background-color: #ffffff;
    }

    footer {
      height: 50px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <header>
    这是页眉
  </header>
  <main>
    这是主要内容
  </main>
  <footer>
    这是页脚
  </footer>
</body>
</html>

在上述示例中，我们使用了HTML5的结构化标签<header>、<main>和<footer>来分别表示页眉、主要内容和页脚。通过设置HTML和Body的高度为100%，然后将Body的显示方式设置为Flex布局，并且垂直排列元素，就可以实现我们所需的100%高度布局。

在给定的示例中，我们设置了页眉和页脚的高度为50px，并且给它们分别设置了背景颜色。主要内容采用了Flexbox中的flex: 1属性，这样它就会占据剩余的空间，从而实现100%的高度布局。

兼容性考虑

使用Flexbox布局可以解决大部分浏览器的兼容性问题，但是在某些旧版本的浏览器中可能会出现兼容性问题。为了更好地兼容不支持Flexbox布局的浏览器，我们可以使用CSS Grid布局进行回退。

下面是一个使用CSS Grid布局进行回退的示例代码：

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

    body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header"
        "main"
        "footer";
    }

    header {
      grid-area: header;
      height: 50px;
      background-color: #f0f0f0;
    }

    main {
      grid-area: main;
      background-color: #ffffff;
    }

    footer {
      grid-area: footer;
      height: 50px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <header>
    这是页眉
  </header>
  <main>
    这是主要内容
  </main>
  <footer>
    这是页脚
  </footer>
</body>
</html>

在上述回退方案中，我们使用了CSS Grid布局来定义了一个包含三个网格区域的网格模板。通过给每个元素设置对应的grid-area属性，我们将元素放置到相应的网格区域中。其余的样式设置与前述示例相似。