Javascript 使用双边栏防止内容重叠

我正在使用Bootstrap创建一个包含两个固定边栏和一个页脚的网页。我得到了适当的边栏和页脚位置，但在保持#内容不与边栏和页脚重叠方面存在问题

目标：内容宽度和高度应根据边栏宽度和页脚高度缩小

下面是引导JS的示例：

HTML和CSS如下所示：

.wrapper{
显示器：flex；
宽度：100%；
对齐项目：拉伸；
}
页脚{
颜色：红色；
}
.侧边栏{
位置：固定；
排名：0；
高度：100vh；
z指数：999；
过渡：均为0.3秒；
颜色：红色；
}
#左侧边栏{
左：0；
最小宽度：300px；
最大宽度：300px；
}
#右侧边栏{
右：0；
最小宽度：420px；
最大宽度：420px；
}
#内容{
宽度：100%；
填充：20px；
高度：100vh；
过渡：均为0.3秒；
背景：011627；
}

横幅


福

页面标题
知识产权是一种权利，是一种权利，是一种权利，是一种权利
...

ToC


酒吧

花式页脚

使用

位置：固定将从元素的自然流动中移除侧栏（特别是从flex容器的效果中移除侧栏）。固定元素不会相互作用，也不会在其周围推动元素

您可以尝试使用与侧边栏宽度匹配的侧边距将
#content
div居中

.sidebar {
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 999;
  transition: all 0.3s;
  color: red;
}

#left-sidebar {
  left: 0;
  min-width: 300px;
  max-width: 300px;
}

#right-sidebar {
  right: 0;
  min-width: 420px;
  max-width: 420px;
}

#content {
  width: 100%;
  margin: 0 420px 0 300px; // center content between the sidebars
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
  background: #011627;
}

我在代码片段中添加了下面的解决方案，并制作了Youtube视频

请查看以下Youtube链接以获取完整教程：


让我知道反馈：-）


body{margin:0}
.包装纸{
显示器：flex；
宽度：100%；
对齐项目：拉伸；
}
页脚、.sidebar、#内容{位置：绝对；}
页脚{
颜色：红色；
底部：0；
背景：#000；
宽度：100%；
高度：40px；
}
.侧边栏{
}
#左侧边栏{
左：0；
宽度：150px；
排名：0；
背景：#ccc；
高度：计算（100vh-40px）；
z指数：1；
}
#右侧边栏{
右：0；
宽度：150px；
排名：0；
背景：#ccc；
高度：计算（100vh-40px）；
}
#内容{
宽度：计算（100%-300px）；
高度：计算（100vh-40px）；
过渡：均为0.3秒；
背景：011627；
左：150px；
}
.content包装器{padding:15px；}


横幅


福

页面标题
知识产权是一种权利，是一种权利，是一种权利，是一种权利
...

ToC


酒吧

花式页脚


页脚怎么样？它似乎不像侧边栏那样遵循相同的惯例。为内容添加100%的边距是错误的解决方案。然后内容大小将为100%+左右侧边栏宽度。因为这个底部的单杠会来，这又错了。对不起，我不同意这个解决方案。请检查我的解决方案，我也制作了视频@AjayMalhotra您的解决方案不会固定边栏，一旦内容区域高于屏幕，它将不会滚动。