Question

我在div（.block）中有元素（#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内的所有元素（#block_list）？

Answer 1

添加以下代码行来设置元素的高度：

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

Updated CodePen

显然，另一种解决方案是用CSS做这件事，就像其他答案一样。

Answer 2

将高度100％添加到block_list和block_list-wrapper，然后添加overflow：滚动到block_list。

Answer 3

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

为height: 100vh或

#block_list-wrapper #block_list

为height: 100vh指定#block_list-wrapper，然后height:100%指定#block_list-wrapper #block_list。

您的代码：http://codepen.io/anon/pen/jbBgpo

Answer 4

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

更新的CodePen here

Answer 5

为元素赋予高度，以便您可以在div上获取滚动条。以下链接代码工作正常。

https://jsfiddle.net/LLrkfvhf/

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

5 个答案: