如何使一个部分既可滚动又与页面的其余部分完全一样高？

Question

我有一个结构如下的页面：

+-----------------------------------------+
|                 Header                  |
+----------+------------------------------+
| Sidebar  | Content                      |
|          |                              |
|          |                              |
|          |                              |
+----------+------------------------------+

我希望整个页面与视口一样高，即height: 100vh;

问题是我希望内容部分根据需要填充页面，但同时可滚动（以防它的孩子太高了）。

一个简单的解决方案是将内容的高度设置为calc(100vh - height_of_header)，但遗憾的是，由于标题的高度并不总是恒定的，因此没有讨论。

我尝试在内容部分设置height: -webkit-fill-available，但这不起作用（奇怪的是，它与height: 100% 的效果相同）

我正在考虑使用 JS 来解决这个问题，但我希望看到一个纯 CSS 的解决方案。

我更喜欢不需要display: grid 的解决方案，但这也很好！谢谢！ :)

Here is a codepen I made, in case it can be helpful.

Answer 1

您应该将overflow-y: hidden（尽管auto 和scroll 也可以）添加到父元素（在这种情况下为<main>）。