如何使用flexbox布局带有页眉和侧视的页面，并使它们都固定，而不需要在主要内容上应用静态边距以防止其被覆盖？

我正在查看https://keep.google.com/，他们使用flexbox布局了所有内容，但在滚动内容div并检查它时，仍然有一个固定的标题和sider，没有任何偏移量，只有普通的flexbox。

我无法复制这个...我有一个flexbox布局的代码，但不能让标题和侧视保持固定而不被掩盖。

---

顺晟科技：

我说过一个选项是设置标题的高度，并由此计算侧边栏的高度以及主体部分的高度（请参见下面的示例）。

如果我可以补充的话，“keep.google”并不冒犯你，但我认为网格会是这种布局的更好选择。

将元素大小调整到视口的大小，并确保flex项是不会溢出的滚动容器。

您应该能够使用普通FlexBox实现此布局。

我们将有两个flex容器:

• 垂直排列我们的标题和侧边栏+内容
• 在其上水平地显示我们的侧边栏和内容

您可以使用。

确保元素占据视口的高度

Flex项希望在默认情况下保持其最小内容大小（）。但是，因为我们希望内容在中滚动，所以我们希望flex项本身总是填充flex容器中的任何可用空间。我们可以使用。

重置此自动行为

然后，我们使用。

将侧边栏和内容区域转换为滚动容器

下面是一个工作示例: