固定 div 可滚动的 div

【问题标题】：div scrollable with fixed div固定 div 可滚动的 div
【发布时间】：2017-02-26 22:28:37
【问题描述】：

我试图弄清楚如何根据旧索引设置一个基本的页面设置，该索引设置有一个固定的标题/导航栏 div，比如说 200px 高度。下面带有页面内容的第二个 div 应该是可滚动的，并且适合浏览器窗口内的剩余垂直空间。有什么建议吗？

【问题讨论】：

欢迎来到 StackOverflow！听起来您只是在寻找position: fixed。为了让我们更好地帮助您，请更新您的问题，以便它在 minimal, complete, and verifiable example 中显示所有相关代码。还请务必让我们知道您迄今为止为解决问题所做的尝试。如需更多信息，请参阅help article，了解如何提出好的问题。

【解决方案1】：

将overflow: hidden; 添加到您的CSS 部分，这将使div 不可滚动！ overflow: auto; 使 Div 再次可滚动

【讨论】：

【解决方案2】：

您可以固定导航栏并让正文在其下方滚动：

.navbar {
  height: 3em;
  width: 100%;
  position: fixed;
}

或将页面高度限制为浏览器窗口大小并使第二个 div 可滚动：

.page {
  overflow-y: scroll;
  height: calc(100vh - 3em); /* browser viewport height minus the navbar height */
}

注意滚动条位置的不同：

【讨论】：