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

标签 html css

我有一个容器 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,这是我想要避免的。

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

最佳答案

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

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

关于html - 防止溢出内容占用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10151056/

相关文章:

javascript - 使用另一个元素的 x 和 y 偏移定位一个 div 元素

php - 如何使用 OR 和 AND 进行过滤

html - 表格不会使用 MaterializeCSS 对齐

firefox - CSS3 不透明度转换期间字体变暗是否有解决方法?

css - 带有阴影+文本覆盖和悬停时另一个覆盖的 Bootstrap 响应图像

css - #zoom : 1; used 时 Node.js Less 编译器解析错误

javascript - 当前元素居中时如何让下一个元素居中滚动?

javascript - 表单清除/提交 Javascript

css - ie 8 添加了不必要的顶部和底部填充

html - 如何在 CSS 中移动元素符号点?