实现头部底部固定，内容滚动布局的两种方式：Flex布局、Fixed定位具体描述移动端一般会有让头部、底部固定，只能内容

具体描述

移动端一般会有让头部、底部固定，只能内容滚动的需求，PC端一般会有让头部固定，内容、页脚都滚动的需求。

这里以移动端的实现为示例。

具体实现

有两种实现方式：固定定位和Flex布局。

首先，重置基础样式

html,
body {
    margin: 0;
    padding: 0;
}

1. Flex布局实现头部固定

HTML示例结构如下：

<html>
  <body>
    <div class='wrapper'>
       <header>头部</header>
       <main class="content">内容</main>
       <footer>底部</footer>
    </div>
  </body>
</html>

需要声明两个类，分别为wrapper、content。

wrapper类

wrapper类用在父容器中，需要设置高度，一般是 100vh，高度占满全屏。

设置布局模式为弹性布局。

把主轴设为垂直向下，这里是让三个子盒子在垂直方向上排开。

.wrapper {
  overflow: hidden;
  height: 100vh; 
  /* height: 100%; */
  display: flex;
  flex-direction: column;
}

content类

content类用在需要滚动的那一部分，一般为中间的内容区域。

设置flex属性为1，表示吸收剩余高度，这样就会撑满中间的内容区域，至于头部、底部的高度根据ui设计进行设置。

然后设置overflow属性为scroll，表示具体的内容超出内容区域时，出现滚动条。

.content {
  overflow: scroll;
  flex: 1;
}

至此，flex布局方式实现头部固定，内容滚动布局已完成。

补充说明

如果 wrapper 类中height使用100%，需要html、body同时设置为 100%，才能铺满屏幕高度。


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

2. Fixed定位实现头部固定

HTML示例结构如下：

<div>
    <header>头部</header>
    <div class="top-placeholder"></div>
    <main>内容</main>
    <div class="bottom-placeholder"></div>
    <footer>底部</footer>
</div>

头部固定

header 元素设置为固定定位。

设置固定定位后会激活header元素的left属性和right属性，两者默认值均为auto，表示吸收剩余宽度，width属性默认值也为auto，也表示吸收剩余宽度，三者的优先级为：right > left > width。

可以设置 left、right 均为 0，让 width 吸收剩余宽度，使得header元素的宽度撑满视口宽度。

header {
  left: 0; right: 0;
  position: fixed;
  height: 60px;
}

可以直接设置 width 为 100 vw，使得header元素的宽度撑满视口宽度。

header {
  width: 100vw;
  position: fixed;
  height: 60px;
}

固定定位会使header元素脱离普通文档流，后面的main元素在布局上会忽略前面的header元素，此时会出现header元素遮盖住main元素部分区域的问题。

此时需要一个辅助元素，占据header元素本该占据的位置，该元素高度一般和header元素一致。

.top-placeholder {
  height: 60px;
}

底部固定

与header元素类似，footer元素也是设置固定定位，需要将bottom设置为0。

footer {
  left: 0; right: 0; bottom: 0;
  position: fixed;
  height: 48px;
}

此时同样需要一个辅助元素，占据footer元素本该占据的位置，该元素高度一般和footer元素一致。

.bottom-placeholder {
  height: 48px;
}

至此，Fixed定位方式实现头部底部固定，内容滚动布局也已完成。