使用 CSS 忽略数据以进行页面布局

Question

抱歉，我想不出更好的标题，我不明白如何表达这个问题。我正在使用 Bubble（无代码平台）并使用 CSS 来调整我的重复组的大小以实现垂直响应。我已经在 Bubble 论坛上发布了这个问题，但我来到 Stack 是因为我认为这个问题可以使用 CSS 解决。感谢任何帮助。

有效的代码是这样的：

<style>
#list {
height: calc(100vh - 175px) !important;
min-height: 468px !important;
overflow-y: scroll !important;
}

</style>

我遇到的问题是，无论该组有多少可见，页面布局似乎都会考虑整个组的数据。因此，例如，假设我在列表中有 20 个项目，并且列表长 900 像素。但是，视口只有 600 像素，因此列表最多只能看到 600 像素（剩余的 300 像素可以滚动）。问题是页面底部的页脚被下推到 900px，因为它的行为就像整个 900px 组是可见的，即使它不是。这意味着在组的底部和页脚之间有 300px 的空白区域。页脚应为 600 像素。

这是问题的视频：https://gifyu.com/image/fdOT

如您所见，Notes 不会推送页脚，因为它只有 3 个项目，但是当将 Person 列表带入视口时，它会推送页脚，因为它有更多项目，即使它们是隐藏的。

是否有一些 CSS 会忽略或隐藏布局中不可见的数据？

Answer 1

问题是您没有设置列表的宽度，因此即使您设置滚动，它也会扩展以适应包含，要解决此问题，您只需为列表设置宽度：100vw。 现在列表将使用 100vw，如果数据超过它将滚动，页脚也将保持 100vw。