html - 如何使用 css 恢复溢出滚动行为

Question

我想知道我需要用这段代码中的 div#blocker 做什么来恢复“最里面”溢出的能力，通过滚动来处理:https://jsfiddle.net/39q78tdm/ .

* {
  box-sizing: border-box;
}

main {
  background: pink;
  height: 400px;
  border: solid;
  overflow: hidden;
}

container {
  background: yellow;
}

#wrapper {
  height: 100%;
  overflow: scroll;
}

#inner {
  background: aqua;
  height: 800px;
}

<main>
  <div id="blocker">
    <container>
      <header>header in container</header>
      <div id="wrapper">
        <div id="inner">
          innermost
        </div>
      </div>
    </container>
  </div>
</main>

Answer 1

您的#blocker 导致整个元素的高度被扩展。结果，整个 container 也以全高 (824px) 显示。

这可以通过将 #blocker 设置为与 main 具有相同的高度来解决。

我所做的其他更改在这种情况下并不是真正必要的，但通过执行 calc(100% - headerHeight)，我可以确保 #inner 中的全部内容 可以显示。如果您不这样做，内容的最底部可能会被截断，因为它们位于被 main 的 overflow: hidden 隐藏的黑色边框之外。

* {
  box-sizing: border-box;
}
main {
  background: pink;
  height: 400px;
  border: solid;
  overflow: hidden;
}
#blocker {
  height: 400px;
}
container {
  background: yellow;
}
#wrapper {
  height: calc(100% - 24px);
  overflow: scroll;
}
#inner {
  background: aqua;
  height: 800px;
}

<main>
  <div id="blocker">
    <container>
      <header>header in container</header>
      <div id="wrapper">
        <div id="inner">
          innermost
        </div>
      </div>
    </container>
  </div>
</main>