Html 固定了页眉、页脚和侧边栏，中心有滚动内容区

首先，我想创建以下布局：

但我有以下问题：

• 这两个侧栏不包含在可滚动内容div中
• content div的大小不是固定的
• 可滚动内容溢出时不显示滚动条
• 最好使用浏览器的主滚动条

有人能帮我解决这些问题吗？

使用 这使用了CSS的几个新功能，这些功能在您选择的浏览器中可能受支持，也可能不受支持。这些包括，和。CSS变量可以用静态值处理，而Grid/

位置：sticky

可以用静态值优雅地降级

/*删除不必要的边距/填充*/
html，正文{边距：0；填充：0}
.包装纸{
显示：网格；
/*页眉和页脚横跨整个宽度，边栏和内容是固定的，边上有空白*/
网格模板区域：
“标题”
“清空\u左侧边栏\u 1内容边栏\u 2清空\u右侧”
“页脚页脚”；
/*仅垂直展开中间部分（内容栏和侧栏）*/
网格模板行：0fr 1fr 0fr；
/*100%宽度，但内容和边栏的静态宽度*/
网格模板列：1fr 100px 400px 100px 1fr；
/*强制网格至少为屏幕的高度*/
最小高度：100vh；
}
.标题{
网格区域：标题；
/*将收割台粘到格栅顶部*/
位置：粘性；
排名：0；
/*确保标题显示在内容/侧栏的顶部*/
z指数：1；
/*总体外观*/
背景色：#FCFF34；
文本对齐：居中；
字号：1rem；
线高：1.5；
填充：1rem；
}
/*保存页眉高度以正确设置粘性内容的“padding top”和“margin top”*/
：根{
--收割台高度：计算（1rem*1.5+1rem*2）；
}
.侧边栏-1{
网格区域：侧边栏_1；
}
.侧边栏-2{
网格区域：侧边栏2；
}
.侧边栏-1，
.侧边栏-2{
显示器：flex；
弯曲方向：立柱；
位置：粘性；
排名：0；
/*样式设置以匹配引用*/
背景色：#BC514F；
}
.内容{
网格区域：内容；
/*总体外观*/
背景色：#99BB5E；
}
.页脚{
网格区域：页脚；
/*将页脚粘贴到网格底部*/
位置：粘性；
底部：0；
/*总体外观*/
背景色：#FCFF34；
文本对齐：居中；
字体大小：.8rem；
线高：1.5；
填充：.5rem；
}
/*保存页脚高度以正确设置粘性内容的“底部”和“最小高度”*/
：根{
--页脚高度：计算（.8rem*1.5+.5rem*2）；
}
.粘性垫片{
柔性生长：1；
}
.粘性内容{
位置：粘性；
底部：var（--页脚高度）；
最小高度：计算（100vh-var（--页脚高度））；
框大小：边框框；
--填充：10px；
衬垫：
计算（变量（--收割台高度）+变量（--填充））
var（--padding）
var（--填充）；
边缘顶部：计算（0px-var（--收割台高度））；
}

标题（绝对）
边栏1绝对位置，固定宽度
可滚动内容


第1行


第2行


第3行


第4行


第5行


第6行


第7行


第8行


第9行


第10行


第11行


第12行


第13行


第14行


第15行


第16行


第17行


第18行


第19行


第20行
边栏2绝对位置，固定宽度


第1行


第2行


第3行


第4行


第5行


第6行


第7行


第8行


第9行


第10行
页脚（绝对值）

编辑
1.为要修复的div添加

position

属性作为

absolute

。
2.保持正文

溢出

属性

自动

注意：将主体的z索引设置为-1将使主体的其余部分无法访问。

---

参考资料：

非常感谢，伙计。招待会。是否可以从div外部滚动可滚动div？我的意思是，无论你在页面内滚动到哪里，我都希望它滚动可滚动的div。这可能吗？是和否（好吧，不是在我拥有的时间内）。使用浏览器的主滚动条可以使其同时滚动边栏。我不确定这对你是否合适。我已经在我的答案中添加了JSFIDLE示例。这非常适合我所尝试的。谢谢有任何像你的例子一样的php模板。如果有，请分享链接。谢谢advance@SabaAhangFacebook的当前标题（所有

中的内容）的位置为

位置：固定
。左/中/右列包含在一个框中，该框与
位置：相对偏移；顶部：56px
。这是一种方法，但必须非常小心，不要将内容添加到比容器高的标题中，或者如果添加了内容，请相应地调整偏移量。此外，用
位置：relative
偏移主体意味着某些内容可能会被删除，因此您必须小心。（我过去曾亲眼看到fb的布局被这些问题搞得一团糟。）谢谢你的回复！请注意，你应该在这里，在这个网站上发布有用的答案，否则你的帖子有被删除的风险。如果您愿意，您仍然可以包含该链接，但仅作为“参考”。答案应该是独立的，不需要链接。