Question

我有一个网站，我希望有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%;
}

从我通过搜索互联网看到的，这应该是有效的。但我根本没有看到任何滚动条。

为什么呢？

我该如何解决这个问题？

Answer 1

height: 100%百分比仅影响元素的高度，如果该元素的父元素具有显式高度。默认情况下，body标记的高度是内容的高度，而不是窗口的完整高度。

尝试添加此内容：

html, body { height: 100%; }

Answer 2

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

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

2 个答案: