css - 如何将垂直滚动条添加到 div 的一部分，同时保持两个滚动条控件可见？

Question

我有一个分为 2 个部分(顶部和底部)的 div，我试图让底部部分垂直滚动。整个 div 具有固定大小。底部的内容是动态的，我不知道那里会有多少(可能有数百行文本)。

我能做的最好的是:http://jsfiddle.net/2zdx251b/

#main {
    border: 1px solid #000000;
    width: 240px;
    height: 600px;
    overflow: hidden;
}

#want-to-scroll {
    height: 100%;
    overflow-y: auto;
}

这很接近，但我无法向下滚动到足够远，看不到底部内容的结尾，也看不到滚动条的底部“箭头”。如果您查看 fiddle ，很明显滚动条无法正常工作。

如何查看整个底部部分(即向下滚动时的所有内容，以及始终显示滚动条的顶部和底部箭头)？

Answer 1

您遇到的问题是 height: 100%; 考虑了容器元素 #main 的整个高度。

如果您习惯使用 CSS flex , 那么这可以通过添加灵活的列来清理，如 this updated fiddle .

#main {
    /* ... */
    display: flex;
    flex-direction: column;
}

请注意，hr 元素的样式需要包含 width: 100%; 以适应这一点。