我有一个固定的容器，我在其中放置了一个包含动态项目数量的列表 (ul).在容器的顶部有一个标题.
似乎标题的存在弄乱了列表滚动.即无法滚动到列表中的最后一项，因为列表的底部被推到视口下方.
我的 HTML &CSS(骨架)位于 http://jsfiddle.net/brjwjn2L/2/ 中，您可以注意到滚动问题.
我的 HTML:
<div class="菜单"><div class="icon-list"><ul>
<div class="topRect">第 1 项 <!-- 项目数量未知-->
我很感激有关如何显示列表滚动条以便用户可以一直滚动到最后一项的任何提示.
谢谢伊丹
正在从
更改 .menu-wrap 的 CSS位置:固定；到
位置:相对；一个选项?它确实解决了滚动问题，但可能会改变您的布局.
你也可以试试
位置:绝对；虽然它似乎没有正确显示.
由于这不是一个选项，请将标题 div 的高度样式更改为百分比表示 15%:
<div>我的项目</div>然后更改您的菜单高度以填充百分比的其余部分(不是 100%):
.menu {高度:85%；溢出-y:自动；}问题是标题 div 和菜单 div 具有相同的容器父级.因此，由于标题 div 占用了 100 像素，因此该 100 像素已从菜单的 100% 中移除.
I have a fixed container in which I placed a list (ul) with dynamic number of items. at the top of the container there's a title.
It seems that the presence of the title messes the list scroll. i.e. one cannot scroll to the last item on the list, since the bottom part of the list is pushed below the view port.
My HTML & CSS (skeleton) is at http://jsfiddle.net/brjwjn2L/2/ where you can notice the scroll issue.
my 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>
I'd appreciate any hint as for how can the list scroll bar be shown so that user could scroll all the way to the last item.
Thanks Idan
Is changing your .menu-wrap's CSS from
position: fixed;
to
position: relative;
an option? It does fix the scrolling problem, but it might change your layout.
You could also try
position: absolute;
though it doesn't seem to display correctly.
EDIT: Since that isn't an option, change the height style of your title div to percent say 15%:
<div style="height:15%">
<div>my items</div>
</div>
and then change your menu height to fill the REST of the percentage (not 100%):
.menu {
height: 85%;
overflow-y: auto;
}
The problem is that both the title div and the menu div have the same container parent. So since the title div was taking up 100px, that 100px was removed from the menu's 100%.
这篇关于固定容器中可滚动动态内容的滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
