尝试在中间具有可滚动内容的左右*响应*侧边栏，其中滚动条在右侧

Question

我很难完成在Twitter和Instagram桌面版本上都能完成的工作。

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

让我向您展示我在过去两天中发现的一些不完全的东西。

1. A Flexbox layout with fixed sidebars。这里存在三个问题：（1）滚动条位于 content div的右侧。我想要它在浏览器的右侧。 （2）中间的内容未设置为600px宽度。 （3）我怀疑如果宽度为600像素，则周围的侧边栏将无法响应调整后的浏览器大小。

2. This jsFiddle which is very close。这里的问题是代码没有响应。由于侧栏的位置fixed从文档流中删除，因此当我这样写时，其宽度无法自动调整以填充600px宽度内容div周围的空间。相反，我两边都有空白。

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

要求摘要：

• 两个响应式侧边栏，分别固定在页面的左侧和右侧，这些侧边栏会扩展和收缩以填充600px中心内容div周围的空间。

• 位于中心的div，其中包含可滚动的内容；但是，滚动条不在div的一侧（我可以做到，这很容易）。而是像Twitter和Instagram一样位于页面的侧面。

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

Answer 1

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

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

此外，尝试将overflow:hidden;放在中间div CSS上，将overflow-y:auto;放在正文CSS上。

：-）

Answer 2

我明白了！

当我读到this question with an answer that mentions width: 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()行。两个侧边栏都具有此width属性。