html - 防止溢出内容占用空间

Question

我有一个容器 div listings_container，其中包含可变数量的 div listing，每个都清除它之前的 div。容器 div listings_container 具有 CSS 属性 overflow-x: hidden; overflow-y: auto; 和一个固定的 width 和一个 max-height 定义。

问题:如何防止溢出的div占用空间？假设 listings_container 的高度为 30px，而 listing 的高度为 10px。如果我们在 listings_container 中有 4 个或更多 listing，我们将隐藏第 4 个 listing div，并为 listing_cotainer 显示一个垂直滚动条。溢出的 listing div 占用的空间会导致 listings_container 清除另一个 float 的 div，这是我想要避免的。

非常感谢任何帮助!谢谢!

Answer 1

如果您将其设置为 auto，溢出内容将始终超出控件的边界，这会产生非常不可用的效果。如果您设置了 div 的大小，您通常不想使用 auto，除非您知道内容不会溢出。

您的选择是隐藏或滚动以保持大小固定。我个人为此使用滚动容器，这基本上是使用 overflow-y: scroll;然后使用固定高度。