如何制作一个填充剩余屏幕高度并且可滚动的容器？答案

【问题标题】：How to make a container that fill the remaining screen height and is scrollable?如何制作一个填充剩余屏幕高度并且可滚动的容器？
【发布时间】：2021-11-15 07:26:41
【问题描述】：

我正在尝试制作一个固定的 div，它是一个容器，我只想让这个容器可滚动，我想要修复页面的其余部分。这是我所拥有的：Stackblitz。这是一个名为“PageDefault”的组件，它具有 Header 并涉及应用程序中的每个页面（页面的内容是 PageDefault 组件中的道具“children”）。

这是我想做的：

我所拥有的最小示例（没有反应）：

<!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>
      .header {
        top: 0px;
        background-color: green;
        height: 100px;
      }

      .page-title {
        height: 300px;
        background-color: blue;
      }

      .content {
        position: fixed;
        height: 100%;
        overflow-y: scroll;
      }
    </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>

【问题讨论】：

Linking to your code offset is generally not considered acceptable -- 请改为在问题正文中包含您的代码的minimal reproducible example（最好是runnable stack snippet。谢谢！
对不起！我刚刚更新了一个最小的例子（没有反应但结果相同）和一个关于 stackblitz 的例子（有反应）

标签： css reactjs sass

【解决方案1】：

Flexbox 可以做到这一点：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.wrap {
  width: 90%;
  margin: auto;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: orange;
  padding: 1em;
}

h1 {
  background: lightblue;
  margin: 0;
}

main {
  flex: 1;
  background: pink;
  overflow: auto;
}

p {
  height: 1000px;
}

<div class="wrap">
  <header>HEADER</header>
  <h1>TITLE</h1>
  <main>
    <p></p>
  </main>
</div>

【讨论】：