可以实现内容部分自动撑开，顶部和底部不动

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    9.   <style>
    10.     * {
    11.       margin: 0;
    12.     }
    13.     /* 不显示滚动条但是可以滚动 */
    14.     body::-webkit-scrollbar {
    15.       display: none;
    16.     }
    18.     .container {
    19.       /* 给定最小高度，保证不挤压上下部分 */
    20.       min-height: 100vh;
    21.       display: flex;
    22.       flex-direction: column;
    23.     }
    25.     .container .header {
    26.       height: 80px;
    27.       background: pink;
    29.     }
    31.     .container .content {
    32.       background-color: skyblue;
    33.       flex: 1;
    34.       /* content占据所有剩余空间大小 */
    35.     }
    37.     .container .footer {
    38.       height: 60px;
    39.       background-color: black;
    40.     }
    41.   </style>
    42. </head>
    44. <body>
    45.   <div class="container">
    46.     <div class="header"></div>
    47.     <div class="content">
    48.       <p>文字</p>
    49.       <p>文字</p>
    50.       <p>文字</p>
    51.       <p>文字</p>
    53.       <p>文字</p>
    54.     </div>
    55.     <div class="footer"></div>
    56.   </div>
    57. </body>
    59. </html>

    image.png