高度为 100% 的可滚动布局

方法一：使用 CSS 位置：

方法二：使用 CSS 网格

各位网友们，大家好！今天，我将向大家展示一个我在创建可滚动动态高度布局时经常忘记的 CSS 技巧。最近，我正在开发一个类似下图的基本布局。我花了一段时间才想起这个技巧，但一旦想起，我就有一种似曾相识的感觉，很快就完成了这个布局。

有两种方法可以实现这一点：

方法一：使用 CSS 位置：

如果你看一下上面的代码，你就会明白我的意思。正如你所见，导航栏、面包屑导航栏、主页面和页脚都包含在一个高度为 的布局容器中height: 100vh。我希望主页面中的侧边栏和内容框可以滚动。

我可以将高度设置为固定值，类似于height: 800px但overflow-y: scroll使布局响应将成为一场噩梦。

那么，问题来了？🤔。如何将overflow-y: scroll属性应用于高度为 100% 的 div？

这里的解决方案🧪是将其用于position: relative主部分容器以及position: absolute侧边栏和内容栏overflow-y: scroll。

.main {
position: relative;
height: 100%;
}

.sidebar {
position: absolute; 
top: 0;
left: 0;
bottom: 0;  /*stretch from top to bottom w.r.t .main section*/
width: 10rem;
overflow-y: scroll;
}

.content {
position: absolute;
top: 0;
left: 10rem;
bottom: 0;
right: 0; /* stretch from top to bottom, and shift 10rem from left and stretch till right */
overflow-y: scroll;
}

实现这一点还有很多其他方法。这只是我经常使用的一个技巧。如果您还有其他方法，请评论（我完全同意👂）。恭喜🎉阅读本文。希望对您有所帮助。谢谢。

很多人建议我提供一种巧妙的方法，避免 CSS 位置问题。我又添加了一个使用 CSS 网格的解决方案。

方法二：使用 CSS 网格