【问题标题】:Scrollbar on a div should appear only if it has more than 30 itemsdiv 上的滚动条只有在它有超过 30 个项目时才会出现
【发布时间】: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。

标签: javascript jquery html css


【解决方案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!
    • 这里输入代码是没有代码的。您必须将代码添加到您的帖子中。 stackoverflow 需要它
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-22
    • 1970-01-01
    • 2014-10-02
    • 2013-04-22
    • 1970-01-01
    • 2016-05-10
    • 1970-01-01
    相关资源
    最近更新 更多