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

Question

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

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

我的 HTML 和 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 具有相同的容器 parent。因此，由于标题 div 占用了 100px，因此从菜单的 100% 中删除了这 100px。

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

scroll issue of scrollable dynamic content in fixed container

html

css

scrollbar