防止#content与双边栏重叠答案

【问题标题】：Prevent #content overlap with double sidebar防止#content与双边栏重叠
【发布时间】：2020-06-27 04:24:56
【问题描述】：

我正在使用 Bootstrap 创建一个带有 2 个固定侧边栏和一个页脚的网页。我获得了适当的侧边栏和页脚位置，但在保持#content 与侧边栏和页脚重叠时遇到了问题。

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

这里有 Bootstrap JS 的示例：https://www.codeply.com/p/9SuDUCHCcA

HTML 和 CSS 如下：

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

footer {
color: red;
}

.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%;
  padding: 20px;
  height: 100vh;
  transition: all 0.3s;
  background: #011627;
}

<body>
<div class="wrapper">

<nav id="left-sidebar" class="sidebar">
  <p>
  Banner
  </p>
  <p>
  Foo
  </p>
</nav>


<div id="content">
<h1 class="title">
Page title
</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

...

</div>
<nav id="right-sidebar" class="sidebar">
  <p>
  ToC
  </p>
  <p>
  Bar
  </p>
</nav>

<footer class="fixed-bottom">
  Fancy Footer  <br/><br/>
</footer>

</div>

</body>

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

我在代码 sn-p 中添加了以下解决方案，并制作了 Youtube 视频。

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

https://youtu.be/TWdvIdmJcsU

让我知道反馈:-)

body{margin:0}
.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}
footer, .sidebar, #content{position:absolute;}
footer {
color: red;
bottom:0;
background:#000;
width:100%;
height:40px;
}

.sidebar {
  
}

#left-sidebar {
  left: 0;
  width:150px;
  top:0;
  background:#ccc;
  height:calc(100vh - 40px);
  z-index:1;
}

#right-sidebar {
  right: 0;
  width:150px;
  top:0;
  background:#ccc;
  height:calc(100vh - 40px);
}


#content {
  width: calc(100% - 300px);
  height: calc(100vh - 40px);
  transition: all 0.3s;
  background: #011627;
  left:150px;
}
.content-wrapper{padding:15px;}

<body>
<div class="wrapper">

<nav id="left-sidebar" class="sidebar">
  <p>
  Banner
  </p>
  <p>
  Foo
  </p>
</nav>


<div id="content">
<div class="content-wrapper">
<h1 class="title">
Page title
</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

...

</div>
</div>
<nav id="right-sidebar" class="sidebar">
  <p>
  ToC
  </p>
  <p>
  Bar
  </p>
</nav>

<footer class="fixed-bottom">
  Fancy Footer  <br/><br/>
</footer>

</div>

</body>

【讨论】：

【解决方案2】：

使用position: fixed 将从元素的自然流动中移除侧边栏（特别是从弹性容器的效果中移除它）。固定元素不会交互或推动它周围的元素。

您可以尝试使用与侧边栏宽度相匹配的侧边距将 #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;
}

【讨论】：

页脚怎么样？它似乎没有遵循与侧边栏相同的约定。
为 100% 的内容添加边距是错误的解决方案。然后内容大小将是 100% + 左侧边栏宽度。因为这个底部的单杠会出现，这又是错误的。抱歉，我不同意该解决方案。请检查我的解决方案，我也制作了视频youtu.be/TWdvIdmJcsU
@AjayMalhotra 您的解决方案没有保持侧边栏固定，内容区域一旦超过屏幕就不会滚动。