在固定位置的元素内显示滚动条

Question

我有一些元素（.block）在一个 div （#block_list）里。 #block_list 的父级是另一个 div （#block_list-wrapper），它具有固定的位置。现在，由于 #block_list-wrapper 具有固定的位置，#block_list 的某些元素没有显示出来。我想要使用滚动条来显示它们。

HTML：

<div id="block_list-wrapper">
    <div id="handle-wrapper">
        <div id="handle">
            <i class="fa fa-chevron-right"></i>
            <i class="fa fa-chevron-left"></i>
        </div>
    </div>
    <div id="block_list">
        <div class="one_column_block-1 block">
            <img src="static/image/one_column_block-1.png">
        </div>
        <div class="one_column_block-2 block">
            <img src="static/image/one_column_block-2.png">
        </div>
        ...
        ...
        ...
        <div class="one_column_block-1 block">
            <img src="static/image/four_column_block-3.png">
        </div>
    </div>
</div>

在codepen.io上查看代码演示。

我尝试添加overflow: scroll，像这样：

#block_list-wrapper #block_list {
    width: 250px;
    overflow: scroll;
}

但它也没有帮助。

如何显示滚动条以显示#block_list中的所有元素(.block)？

- Aamu

---

尝试使用 slimScroll。 - Insane Skull

你需要为一个元素添加固定高度才能进行任何类型的滚动。http://codepen.io/anon/pen/WQpVgW - Stefan Perju

@StefanPerju 嘿，很高兴在这里遇到罗马尼亚人!! :D - Ionică Bizău

@IonicăBizău 我们无处不在，老兄。 :D - Stefan Perju

@StefanPerju 哈哈，说得好。是的，我们也是在SO上！:D - Ionică Bizău

Answer 1

将以下代码添加到设置元素高度的行中:

$("#block_list").css("height", $(window).height())

更新的 CodePen

另一种解决方案显然是使用 CSS 来实现，就像其他答案所说的那样。

- Ionică Bizău

Answer 2

将block_list和block_list-wrapper的高度都设置为100％，然后在block_list中添加overflow: scroll。

- Paran0a

Answer 3

您没有指定高度。您可以通过以下方式之一将高度指定给容器：

1. 将 height: 100vh 指定给您的 #block_list-wrapper #block_list，或者
2. 将 height: 100vh 指定给您的 #block_list-wrapper，然后将 height:100% 指定给您的 #block_list-wrapper #block_list。

您的 CodePen 链接：http://codepen.io/anon/pen/jbBgpo

- Abhitalks

Answer 4

您需要为 block_list 元素设置固定高度。您可以使用 vh 属性并设置 height: 100vh。

这里是更新后的 CodePen 链接

- Stefan Perju

Answer 5

给元素设置高度，这样你就可以在 div 上获取滚动条了。以下链接代码可以正常工作。

https://jsfiddle.net/LLrkfvhf/

- Basheer Kharoti