带有固定边栏的CSS网格

我需要一个固定的标题和侧边栏在我的网站上，除了一个中心分区。侧边栏应该有一个自己的滚动条，就像中心分区一样。我认为网格布局将是实现这一点的方法，但我不能避免正文显示一个公共滚动条，而不是每个容器显示自己的滚动条

我该怎么做？网格真的是更简单的解决方案吗

正文{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：自动1fr；
保证金：0；
}
标题{
背景色：#添加790；
网格柱：1/3；
网格行：1；
文本对齐：居中；
}
主要{
网格柱：1；
网格行：2；
显示器：flex；
对齐项目：拉伸；
}
导航{
背景颜色：橙色；
填充：1em；
最小高度：0；
}
#迪夫曼{
填充：1em；
}

标题
航行

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

html，正文{
身高：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
标题{
背景色：#添加790；
文本对齐：居中；
}
主要{
弹性：1；
显示器：flex；
最小高度：0；
}
导航{
背景颜色：橙色；
宽度：20%；
溢出：自动；
填充：1em；
}
文章{
宽度：80%；
溢出：自动；
填充：1em；
}

标题
航行

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

一些文本

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

这里也应该有一个本地滚动条

为每个需要滚动条的容器设置一个高度，并使用

overflow-y:scroll

@ManojKumar每个容器的高度是屏幕高度减去页眉高度，页眉高度是动态的，取决于用户的字体大小。那么，如何实现您的建议呢？使用JavaScript。CSS无法检测用户字体大小或浏览器高度。@ManojKumar确实有一个CSS答案。非常感谢。