如何创建包含的 css 列。可滚动的中间列和浮动的左右列答案

【问题标题】：Howto create css columns that incl. a scrollable middle column and floating left and right columns如何创建包含的 css 列。可滚动的中间列和浮动的左右列
【发布时间】：2019-07-07 21:07:36
【问题描述】：

我正在创建一个网页，我需要在页面中心有一个内容列（包括固定宽度）以及该内容列左侧和右侧的两个不可滚动（固定）列（包括一个也固定宽度）。左列需要与中间内容列的左侧对齐。右列需要与中间内容列的右侧对齐。如果内容列有很多内容，则中间的内容列应该可以通过浏览器右侧的滚动条进行滚动。但是左右列不能滚动，而是固定在浏览器的顶部。调整浏览器宽度时，左+中+右列保持其宽度并位于网页中间。在左列的左侧和右列的右侧，空白将在两侧以相同的宽度增加/减少。

在我的屏幕示例中，您可以找到我要解决的问题的概念。

我试图在 stackoverflow 和 google 上搜索这个问题，但我只找到了一些不同的示例。

谁知道如何解决这个问题？

【问题讨论】：

标签： css css-float

【解决方案1】：

example in JSBin - （见下面的更新版本，这是错误的，固定的列是粘性的）

绿色不是必需的，它在那里显示包装实际上是以整个地段为中心
绝对定位左右环绕首先是position:fixed 列不会移到视口的一侧

更新

现在在 JSBin

中提供非错误版本

嗯，这比我想象的要难；这个适用于 IE7、8、Safari、FF3.6、Opera、Chrome

查看注释的源代码，特别有趣的是指针事件，没有它们，较新的浏览器将无法单击（选择文本或单击链接）“覆盖” div，这就是此布局正在覆盖的内容一个 Absolutely Position div 并使用绝对定位和相对位置来解决滚动、垂直和水平、内容消失和固定 div 粘性问题

更新为根据 cmets 使用 jQuery

示例：here

【讨论】：

其实这有点麻烦，如果右边的栏太窄的话，右边的栏会粘在窗口的右边......即使身体上有一个最小宽度
第二版应该会更好，之前的评论适用于第一版，留作参考
效果很好！该死的，我试图解决这个问题几个小时。很好！我的机器上没有 IE6。你知道这在 IE6 下也可以工作，还是有解决办法？
是的，在 ie6 中似乎也可以正常工作 :) 不客气，我喜欢挑战！ - 我最初认为固定的 div 是答案，但它们工作得不太好，而且无论如何它们也不会在 IE6 中工作;)
酷！刚刚在IE9中测试过，效果也很完美！还有一个问题，当您将浏览器的宽度调整为比正文（css）的最小宽度更小的宽度时，垂直滚动条将隐藏在浏览器的右侧。即使您将浏览器的宽度更改为非常小的宽度，是否也可以始终显示此滚动条？我在鼠标上使用了滚轮，但如果您没有此滚轮，并且您的浏览器宽度非常小，您将无法向下滚动（如果垂直滚轮被隐藏）。