Twitter bootstrap Flexbox固定收割台，固定左侧导航液含量区域

我试图通过Flexboox和Bootstrap 4实现这种布局：

• 顶部固定收割台
• 固定左侧边栏
• 流体含量区

我不知道如何使标题和边栏固定。到目前为止，其他一切都正常，我希望：

HTML:

---

我在这里根本不会使用flexbox，而是固定元素的固定位置：

html，
身体{
保证金：0；
身高：100%；
}
标题{
位置：固定；
z指数：2；
排名：0；
左：0；
宽度：100%；
高度：20px；
背景：白色；
盒影：0px2px4pRGBA（0,0,0,0.24）；
}
导航{
位置：固定；
z指数：1；
顶部：20px；
左：0；
宽度：200px；
高度：计算（100%-20px）；
背景#FAF9F8；
右边框：1px实心#d9d9d9；
}
文章{
背景#f3f5；
位置：相对位置；
顶部：20px；
左：200px；
宽度：计算（100%-200px）；
/*模拟大高度*/
高度：2000px；
}

标题
导航
内容

这里有一个像您一样使用flexbox的解决方案：

解决问题的方法是移除主体中的主滚动条：

overflow: hidden; // Removes main scrollbar to make header and nav fix
height: 100%; // Sets max height to ensure everything is fixed

还添加一个div以使主部分可滚动：

<article>
  <div>
    Content
  </div>
</article>

---

和我的一样，你能查一下吗？是的。这是一个很好的链接：谢谢，这很好用。不幸的是，不是在我的实际应用程序中，它没有添加流体内容的滚动条。除了添加

overflow-y:auto

并确保高度实际存在之外，我还需要处理其他事情吗？您需要在文章标签中添加一个div，并将内容放在其中。那么它应该可以工作了。谢谢你的回复，不幸的是它不能工作。这里是一个屏幕截图：-检查容器和html的大小。正文有“溢出：隐藏”；我遗漏了一些东西，但不确定是什么

overflow: hidden; // Removes main scrollbar to make header and nav fix
height: 100%; // Sets max height to ensure everything is fixed

<article>
  <div>
    Content
  </div>
</article>

div {
   height: 2000px;
}
overflow-y: auto; // Adds scrollbar