如何制作 3 个独立可滚动的列答案

【问题标题】：How can i make 3 independently scrollable columns如何制作 3 个独立可滚动的列
【发布时间】：2014-05-19 20:59:54
【问题描述】：

我有一个网站，我希望在其上拥有 3 个可独立滚动的 <div> 元素。

html代码是这样的：

<div class="sidebar">Content</div>
<div id="window">Some very long content</div>
<div class="sidebar">More content</div>

关联的css是这样的：

body {
    overflow: hidden;
}

#window {
    font-family: monospace;
    overflow: auto;
    width: 70%;
    float: left;
    height: 100%;
}

.sidebar {
    overflow: auto;
    width: 15%;
    float: left;
    height: 100%;
}

从我通过搜索互联网看到的情况来看，这应该可以工作。但我根本看不到任何滚动条。

为什么？

我该如何解决这个问题？

【问题讨论】：

overflow: auto 仅在必要时添加滚动条。您的内容是否足够长以触发它们？

标签： html css web

【解决方案1】：

height: 100% 作为百分比仅影响元素的高度，前提是该元素的父元素具有明确的高度。 body 标签的高度默认是内容的高度，而不是窗口的全高。

尝试添加这个：

html, body { height: 100%; }

【讨论】：

不幸的是这似乎没有任何效果
我刚刚意识到我有另一个没有 heigth: 100%; 属性的环绕 div。添加它解决了这个问题。感谢您的帮助！

【解决方案2】：

因为你的身高：100%；您的 div 只会调整到文本的高度。通过将您的高度更改为例如：250px，您的代码将起作用。希望这可以帮助。 :)

【讨论】：

问题是我希望它跨越全屏高度。我无法预测窗户有多高