如何实现占满屏幕剩余高度可滚动的容器，其余页面元素保持固定

核心问题排查 #

现有代码的问题主要有3点：

• 没有禁用html、body的默认滚动行为，页面整体仍可滚动
• .content 仅设置了position: fixed但未指定顶部偏移量，会和上方的header、page-title区域重叠
• .content高度设为100%没有扣除上方固定区域的总高度，底部内容会被视口截断无法显示

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 禁用页面整体滚动，清除默认边距 */
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
      }
      .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: green;
        height: 100px;
        z-index: 10;
      }

      .page-title {
        position: fixed;
        top: 100px; /* 对齐header底部 */
        left: 0;
        width: 100%;
        height: 300px;
        background-color: blue;
        z-index: 10;
      }

      .content {
        position: fixed;
        top: 400px; /* header+page-title总高度 */
        left: 0;
        width: 100%;
        /* 高度 = 视口总高度 - 上方固定区域总高度 */
        height: calc(100vh - 400px);
        overflow-y: auto; /* 内容溢出才显示滚动条，比scroll更友好 */
        /* 可按需添加内边距 */
        padding: 16px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="header">header goes here</div>
    <div class="page-title">page title goes here</div>

    <div class="content">
      blablabla blablabla blabla bla blabla blablabla bla blabla bla blablabla
      blabla bla blabla blablabla blabla bla blabla bla bla blablabla blablabla
      blabla bla blabla bla blabla bla blabla bla blablabla blablabla blabla bla
      blabla blablabla bla blabla bla blablabla blabla bla blabla blablabla
      blabla bla blabla bla bla blablabla blablabla blabla bla blabla bla blabla
      bla blabla bla blablabla blablabla blabla bla blabla blablabla bla blabla
    </div>
  </body>
</html>

React场景适配（对应PageDefault组件） #

可以直接把上述逻辑封装到PageDefault组件中：

• PageDefault内部的Header组件固定在顶部
• 接收pageTitle可选参数，存在时渲染固定的标题区域
• 内部给children套上上述.content对应的容器样式即可，所有页面内容的滚动都在该容器内完成

内容的提问来源于stack exchange，提问作者Uriel Libano