div 上的滚动条只有在它有超过 30 个项目时才会出现

Posted 2023-05-09

【中文标题】div 上的滚动条只有在它有超过 30 个项目时才会出现

【英文标题】：Scrollbar on a div should appear only if it has more than 30 items

【发布时间】：2014-08-09 20:02:43

【问题描述】：

我有一个容器 div，其中包含其他 div（列表项）。 此容器 div 的大小应等于 30 个项目的高度。 如果容器 div 中有超过 30 个项目，它应该保持相同的大小，但显示垂直滚动条。

问题：

有没有办法通过 CSS 设置这个容器 div 的样式，这样只有在添加超过 30 个列表项后，才会出现滚动？ 或者我必须在 CSS 中“硬编码”容器 div 的高度，即 list_item*30。或其他可能性：使用 javascript 动态更改高度 初始化时的容器取决于列表项的高度。这些是唯一正确的吗 如何做到这一点？

谢谢。

【问题讨论】：

我假设容器内的 div 具有动态高度？还是它们都一样高？如果它们是动态的，则必须使用 javascript，例如检查存在多少列表项并设置溢出自动或滚动（如果超过 30 个）。如果每个元素的高度相同，则可以只给容器 div 项的高度*30 并通过 css 设置溢出属性

实际上它们是相同的......我只是好奇是否有其他方法不将父高度设置为 list_item*30。因为在那之后如果有人改变 list_item 的高度，他也必须改变父容器的高度。谢谢你，gulty。

【参考方案1】：

如果列表中的每个项目都具有相同的高度，“硬编码”可能是更简单的方法。只需将 item_height*30 的高度设置为 div 并拥有overflow:auto。

【参考方案2】：

在父 div 中提及 CSS 高度并在溢出-y 上滚动。

这里我为父 div 取两个 div 的高度。

此处示例

enter code here

http://jsfiddle.net/2C7qH/

【讨论】：

是的，我就是这么想的。如果项目的高度已知 - CSS（你的 jsfiddle）。如果不是 - 应该使用 JavaScript。似乎这些是唯一的方法，这次没有 CSS 魔法。谢谢。

我更新了 JSFiddle。只是通过它。这里我还提到了 2 个内部 div。如果你想 30 div 高度乘以 30 而不是 2。

这个小提琴链接给你正是你在等待jsfiddle.net/fNdj6/5

感谢所有 jsfiddles，Srinu！

这里输入代码是没有代码的。您必须将代码添加到您的帖子中。 *** 需要它