【CSS】头部尾部固定中间滚动

0、原始代码

<style>
  .header {
    background-color: red;
  }
  .content {
    background-color: #ffeeee;
  }
  .footer {
    background-color: green;
  }
style>
<body>
 <div class="header">headerdiv>
 <div class="content">
   content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
   content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
   content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
 div>
 <div class="footer">footerdiv>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1、position: fixed;

2、height: calc(100% - 44px);

3、display: flex;

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      .header {
        background-color: red;
      }
      .content {
        background-color: #ffeeee;
        flex: 1;
        width: 100%;
        overflow-y: auto;
      }
      .footer {
        background-color: green;
      }
    style>
      <body>
    <div class="box">
      <div class="header">headerdiv>
      <div class="content">
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
      div>
      <div class="footer">footerdiv>
    div>
  body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

相关阅读:
vector的特性及使用
二建Day08 混凝土和易性，强度，外加剂
dc9靶机攻略
高性能MySQL实战第12讲：海量数据MySQL项目实战
人才资源开发杂志人才资源开发杂志社人才资源开发编辑部2022年第15期目录
MySQL高级语句（一）
MATLAB安装
C基础-数组
docker、docker-compose部署oracle，plsql连接远程oracle
【战斗吧，青春！】

原文地址：https://blog.csdn.net/shentian885/article/details/126859933