Question

我有一个固定的容器，我在其中放置了一个包含动态项目数的列表（ul）。在容器的顶部有一个标题。

似乎标题的存在会扰乱列表滚动。即，无法滚动到列表中的最后一项，因为列表的底部被推到视口下方。

我的HTML＆amp; CSS（骨架）位于http://jsfiddle.net/brjwjn2L/2/，您可以在其中注意到滚动问题。

我的HTML：

<div class="menu-wrap">
  <div style="height:100px">
        <div>my items</div>
  </div>
  <div class="menu">
        <div class="icon-list">
            <ul>
                 <li class="playerBox">
                    <div class="topRect">
                        item 1
                    </div>
                </li>

                <!-- unknown number of items -->

                <li class="playerBox">
                    <div class="topRect">
                        item n
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

我很欣赏任何关于如何显示列表滚动条的提示，以便用户可以一直滚动到最后一个项目。

由于伊詹

Answer 1

正在从

更改.menu-wrap的CSS

position: fixed;

到

position: relative;

一个选项？它确实解决了滚动问题，但它可能会改变你的布局。

您也可以尝试

position: absolute;

虽然它似乎没有正确显示。

编辑：由于这不是一个选项，请将标题div的高度样式更改为百分比15％：

<div style="height:15%">
        <div>my items</div>
    </div>

然后更改菜单高度以填充百分比的REST（不是100％）：

.menu {
    height: 85%;
    overflow-y: auto;
}

问题是标题div和菜单div都有相同的容器父级。因此，由于标题div占用了100px，所以从菜单中删除了100px的100％。

滚动固定容器中可滚动动态内容的问题

1 个答案: