Html 允许一个网格项使用固定标题和侧边栏滚动

我有一个两列两行的网格布局。一个粘性的左导航、一个粘性的标题和将位于网格右下角的内容

我现在所拥有的几乎就在那里，但是我希望

.content

div在内容超出屏幕时使用滚动。我原以为我可以直接使用

溢出：auto

，但那不起作用。这是我所拥有的吗

正文{
保证金：0；
溢出：隐藏；
}
.第页{
显示：网格；
网格模板行：55px自动；
网格模板列：20vh自动；
网格模板区域：“导航标题”“导航内容”；
}
.导航{
网格区域：导航；
背景颜色：蓝色；
}
.标题{
网格区域：标题；
背景颜色：灰色；
}
.内容{
网格区域：内容；
高度：1000px；//这是动态的
背景色：红色；
}

侧导航
标题
标题

我加入了更改日志，以查看代码需要更改的地方，以便获得理解。下面还有完整的代码片段。希望这是你所期望的

更改日志

*删除

正文{溢出：隐藏；}

*更改

.page{网格模板列：3.5rem auto；}

*增加

.nav { position: fixed;
      top: 0;
      bottom:0;}

*增加

.header {  position: fixed;
      margin-left: 3.5rem;
      width: 100%;
      height: 3.5rem; }

完整代码

正文{
保证金：0；
}
.第页{
显示：网格；
网格模板行：55px自动；
网格模板列：3.5rem自动；
网格模板区域：
“导航标题”
“导航内容”；
}
.导航{
位置：固定；
排名：0；
底部：0；
网格区域：导航；
背景颜色：蓝色；
}
.标题{
网格区域：标题；
背景颜色：灰色；
位置：固定；
左边距：3.5雷姆；
宽度：100%；
身高：3.5雷姆；
}
.内容{
网格区域：内容；
高度：1000px；
背景色：红色；
}

侧导航
标题
标题

浏览器支持率不是100%，但实际使用粘性而不是固定定位怎么样？（现在在Chrome上测试）你不必处理硬编码的页边距

您仍然需要处理的问题之一是，当侧边栏（

.nav>div

）中的内容高于视口时该怎么办

正文{
保证金：0；
}
.第页{
显示：网格；
网格模板行：55px自动；
网格模板列：3.5rem自动；
网格模板区域：“导航标题”“导航内容”；
}
.导航{
网格区域：导航；
背景颜色：蓝色；
}
.nav>div{
位置：粘性；
排名：0；
}
.标题{
网格区域：标题；
背景颜色：灰色；
位置：粘性；
排名：0；
最小高度：3.5雷姆；
}
.内容{
网格区域：内容；
最小高度：1000px；
背景色：红色；
}

侧导航
标题
标题

对于

溢出：自动
工作（即滚动条渲染）浏览器需要一个触发器。此触发器通常是一个高度/宽度限制，强制出现溢出情况，从而启动滚动条

触发条件因浏览器而异。它们在CSS技术中也有所不同，例如flex、网格和块布局

在这种特殊情况下，有几个逻辑位置可以建立溢出条件，但它们都不起作用

您可以将网格项作为目标，正如您所尝试的：

.content {
   height: 1000px
   overflow: auto;
}

但它不起作用。流体项上不显示滚动条


正文{
保证金：0；
/*溢出：隐藏*/
}
.第页{
显示：网格；
网格模板行：55px自动；
网格模板列：20vh自动；
网格模板区域：“导航标头”
“导航内容”；
}
.导航{
网格区域：导航；
背景色：浅绿色；
}
.标题{
网格区域：标题；
背景颜色：浅灰色；
}
.内容{
网格区域：内容；
高度：1000px；
溢出：自动；
背景色：红色；
}

侧导航
标题
标题
不完全正确。我希望标题和侧导航是粘性的。只需滚动右下角
。content
div“position:fixed”即可用于侧导航和标题。现在让我检查一下@seanyesmuntHmm，更近了。我觉得在css网格中不需要使用边距吗？我想在content div上扩展样式，并在nav/标题上保留基本的网格样式（如果可能的话）。我再拿你有的玩。我想避免的另一件事是将滚动条延伸到屏幕顶部。理想情况下，它将从content Div的顶部开始。由于.content中提供了固定的高度，滚动条被延伸。我认为“快速眼动”单位也有反应。我不得不更改网格模板列，因为它对给定的单元没有响应。你们需要更多的支持吗？我喜欢它，并且有多填充来模拟位置：粘性；效果很好。谢谢不需要固定或粘性定位。通过对CSS和HTML进行一些调整，布局可以按预期工作。@Michael_B根据Lakindu所写的内容改进了答案。我甚至不知道实际的需求是什么。我宁愿把你的答案作为一个后备方案，因为我认为在整个窗口上有一个滚动条通常是可取的（在你的例子中，滚动条只在我的指针位于红色区域时才起作用）。在某些浏览器中，它也可能有点难看。我认为其目的是让滚动条只存在于流体网格区域。其他区域应该是固定的。布局在整个窗口上已经有了一个滚动条（只需删除
body
元素上的
overflow:hidden
），这非常完美。正是我想要的。谢谢伟大的解决方案；很好的解释和实施！非常感谢。