试图在中间有一个带有可滚动内容的左右*响应*侧边栏，滚动条在右侧答案

【问题标题】：Trying to have a left and right *responsive* sidebar with scrollable content in the middle, where the scroll bar is on the right试图在中间有一个带有可滚动内容的左右*响应*侧边栏，滚动条在右侧
【发布时间】：2020-10-13 14:13:41
【问题描述】：

我很难完成我在 Twitter 和 Instagram 的桌面版本上看到的一些事情。

我想要的是页面左右两侧的响应式侧边栏。中间是一个包含页面内容的 600 像素宽度的 div。滚动条必须位于页面的右侧，而不是内容 div 的右侧。

让我告诉你一些我在过去两天发现的不完全存在的东西。

A Flexbox layout with fixed sidebars。这里存在三个问题：（1）滚动条在content div的右侧。我希望它位于浏览器的右侧。 (2) 中间的内容没有设置为 600px 宽度。 (3) 我怀疑如果它的宽度是 600px，那么周围的侧边栏不会响应地调整到正在调整大小的浏览器。
This jsFiddle which is very close。这里的问题是代码没有响应。因为侧边栏是通过它们的fixed 位置从文档流中删除的，所以当我这样写时，它们的宽度不能自动调整以填充600px 宽度内容div 周围的空间。相反，我在两边都有空白。

This 将是我想要的，如果侧边栏 div 在您滚动时跟随您向下滚动页面。

要求摘要：

两个响应式侧边栏，固定在页面的左侧和右侧，可扩展和收缩以填充 600 像素中心内容 div 周围的空间。
中心的 div 包含可滚动的内容；但是滚动条不在 div 的一侧（我可以做到，这很容易）。而是像 Twitter 和 Instagram 一样位于页面的一侧。

我已经在这两天待了大约 16 个小时。很明显，我不能使用position: fixed 或sticky，因为侧边栏必须像 Twitter 一样响应。换句话说，中间的内容 div 占据了 600px 的宽度，侧边栏会响应地调整以填充剩余的宽度。但是如果没有position: fixed，就没有办法让侧边栏保持原样......？

【问题讨论】：

标签： html css

【解决方案1】：

我的最佳猜测是您将position:absolute; 用于侧栏，将left:0; top:0; 用于左侧栏，right:0; top:0; 用于右侧栏。

至于响应性，可以尝试使用相对单位来表示宽度，例如 vw 或 vh。（例如，width:20vw;（将是屏幕宽度的 20%））。我相信这将有助于您的内容根据屏幕大小进行换行和更改。

另外，尝试将 overflow:hidden; 用于中间 div CSS，将 overflow-y:auto; 用于主体 CSS。

:-)

【讨论】：

【解决方案2】：

我明白了！

当我阅读this question with an answer that mentionswidth: calc()时，我想到了解决方案。

这是我的代码，大致如下：

<article>
    <aside className="general-sidebar aside1 w-calc">foo
    </aside>
    <div className="center-page">bar</div>
    <aside className="general-sidebar aside2 w-calc">baz
    </aside>
</article>

.aside1 {
    left: 0;
}

.aside2 {
    right: 0;
}

.general-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

.w-calc {
    width: calc((100% - 600px) / 2) !important;
    // border: 2px solid white;
}

所以基本上侧边栏位于左侧和右侧的固定位置，从文档流中移除...为了弥补这对我使用 Flexbox 实现的响应宽度的影响，我插入了 width: calc() 行。两个侧边栏都接收此宽度属性。

【讨论】：