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

Question

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

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

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

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

这很接近，但是我无法向下滚动到足以看到底部内容的结尾，而我看不到滚动条的底部“箭头”。如果你看一下小提琴，很明显滚动条工作不正常。

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

Answer 1

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

如果您习惯使用CSS flex，则可以通过添加灵活列来清除此问题，例如this updated fiddle。

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

注意，hr元素需要设置样式以包含width: 100%;以便适应这种情况。