【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

相关阅读:
自学网络安全的三个必经阶段（含路线图），小白必看
Go分布式缓存使用 Protobuf 通信(day7)
Spring Data Redis概述及用法
MyBatis【一】
note_47: sony wf-1000xm4右耳机忽然连不上
QCC51XX--- BTLinks获取key
北邮22级信通院数电：Verilog-FPGA（3）实验“跑通第一个例程”modelsim仿真及遇到的问题汇总（持续更新中）
数据库笔记
一文了解微分段应用场景与实现机制
docker镜像的创建-Dockerfile

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