• 【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;

        

    • 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

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

        

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    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
  • 相关阅读:
    艾美捷Mabtech抗人IFN-αmAb(MT1)未偶联方案
    SAP UI5 SmartTable 控件的使用介绍试读版
    HW之轻量级内网资产探测漏洞扫描工具
    队列OJ--循环队列
    lvs集群
    VS2022+CMAKE+OPENCV+QT+PCL安装及环境搭建
    数据库的备份和还原（slqserver）
    String字符串性能优化的几种方案
    认识Tomcat
    vue3+vite自动引入组合Api插件unplugin-auto-import
  • 原文地址：https://blog.csdn.net/shentian885/article/details/126859933