填充视口而不会溢出的 Bootstrap 网格答案

【问题标题】：Bootstrap grid that fills viewport without overflow填充视口而不会溢出的 Bootstrap 网格
【发布时间】：2022-12-10 13:15:24
【问题描述】：

我正在使用 Bootstrap 5 尝试提出我认为非常简单的布局。我想显示 MxN 单元格网格。每个单元格大小相同。我希望它能填满整个视口而没有任何方向的滚动条。滚动条是我卡住的地方。

我在各种 div 上尝试了不同的高度和最大高度组合。这有助于容器 div 防止它长得太高，但行最终会垂直溢出。我真正想要的是将所有内容缩小到没有滚动条的地方，即使这意味着列变窄。理想情况下，我想使用引导程序，但这不一定是必需的。

下面的 sn-p 是我所在的位置。它似乎比视口高了大约 20%。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row p-0">
    <div class="col p-0 border">
      <span class="ratio ratio-16x9 d-flex align-items-center justify-content-center">
        Cell
      </span>
    </div>
    <div class="col p-0 border">
      <span class="ratio ratio-16x9 d-flex align-items-center justify-content-center">
        Cell
      </span>
    </div>
  </div>
  <div class="row p-0">
    <div class="col p-0 border">
      <span class="ratio ratio-16x9 d-flex align-items-center justify-content-center">
        Cell
      </span>
    </div>
    <div class="col p-0 border">
      <span class="ratio ratio-16x9 d-flex align-items-center justify-content-center">
        Cell
      </span>
    </div>
  </div>
</div>

编辑 1：

看来问题出在纵横比上。它似乎想要填充宽度，甚至以增加比单元格更大的高度为代价。

这是一个没有比率的更新示例。它呈现并正确响应：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid d-flex h-100 mh-100 vh-100 flex-column">
  <div class="row p-0 flex-grow-1">
    <div class="col p-0 border d-flex align-items-center justify-content-center">
      <div>
        Cell
      </div>
    </div>
    <div class="col p-0 border d-flex align-items-center justify-content-center">
      <div>
        Cell
      </div>
    </div>
  </div>
  <div class="row p-0 flex-grow-1">
    <div class="col p-0 border d-flex align-items-center justify-content-center">
      <div>
        Cell
      </div>
    </div>
    <div class="col p-0 border d-flex align-items-center justify-content-center">
      <div>
        Cell
      </div>
    </div>
  </div>
</div>

最终目标是让单元格 div 始终保持 16/9 的纵横比，而不会变得比父 div 更大，并且在父级中水平和垂直居中。我想换句话说，单元格 div 需要增长，直到高度或宽度达到父级并停在那里。相反，它似乎会一直增长，直到宽度达到父级宽度，即使高度比父级高。

此外，我应该澄清行数/列数是动态的，因此这可能会影响解决方案的工作方式，因为我无法对任何与行数和列数相关的大小进行硬编码。

如果有帮助，最终目标是拥有一个视频网格，这些视频必须在一个屏幕上显示而无需滚动。

编辑 2：

只是为了进一步说明，这是我在解决方案中所期望的：

任何地方都没有滚动条。这很可能用于不能期望用户滚动的情况。
无论我在布局中有多少行/列，都需要工作，但可以合理地假设单元格数量足够少，内容仍然很容易看到。
每个单元格的内容都是视频。
所有视频都需要具有相同的纵横比。
由于单元格尺寸不太可能与视频宽高比匹配，因此视频需要在单元格中水平和垂直居中。
用户可能正在调整浏览器的大小，因此需要相应地调整大小。
理想情况下，我更愿意坚持使用 bootstrap 或 straight up css，但如果这不可能，我会考虑其他选项。

【问题讨论】：

标签： css angular bootstrap-5

【解决方案1】：

不能 100% 确定以下内容是否是您所追求的，但请看一下。请注意，它使用 CSS4 属性aspect-ratio，请在此处阅读更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio，并在此处查看浏览器支持https://caniuse.com/mdn-css_properties_aspect-ratio

PS：忽略 JS 代码，它仅用于演示目的，因此您可以动态地从网格中添加或删除项目并查看它的反应。

    function addItem(e) {
        document.querySelector('.container').appendChild(document.querySelector('.col:first-of-type').cloneNode(true));
    }

    function removeItem(e) {
        e.remove();
    }

body {
  margin: 0;
}

.container {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
    width: 100%; height: 100vh;
}
.col {
    background: #444;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
.col > * {
    background: #999;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    max-height: 100%; max-width: 100%;
}

<div class="container">
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
    <div class="col" onclick="removeItem(this)">
        <img src="https://via.placeholder.com/720x405?text=16:9" alt="Thumbnail" title="Click me and i will disappear!" />
    </div>
</div>

<button onclick="addItem(this)" style="background: #be0000; color: white; border: 0; border-radius: 3px; padding: 8px 24px; position: fixed; top: 12px; left: 12px;">Add item</button>

<style>

</style>

<script>

</script>

【讨论】：