可滚动布局，高度 100%
方法一：使用 CSS 定位：
方法二：使用 CSS Grid
大家好👋🏼，各位网友。今天，我要分享一个我在创建可滚动动态高度布局时经常忘记的CSS技巧。最近，我在开发一个类似下图的基本布局。我花了好一会儿才想起来这个技巧，但一旦想起，就感觉似曾相识，很快就完成了布局。
实现这一目标有两种方法：
方法一：使用 CSS 定位：
如果你看一下上面的代码，就会明白我的意思了。正如你所看到的，布局容器内包含了导航栏 (NAVBAR)、面包屑导航栏 (BREADCRUMB BAR)、主区域 (MAIN SECTION) 和页脚 (FOOTER)，高度为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 网格布局的解决方案。