引导网格填充视口而不溢出

我正在使用Bootstrap 5来尝试提出我认为是一个非常简单的布局。我想展示一个MxN网格的细胞。每个单元都是相同的大小。我想要这个填充整个viewport没有任何方向的滚动条。滚动条是我卡住的地方。

我在各种div上尝试了不同的height和max-height组合。这有助于防止容器div长得太高，但是行最终会垂直溢出。我真正想要的是所有东西都缩小到没有滚动条的地方，即使这意味着列变得更窄。理想情况下，我想使用bootstrap，但这不是必需的。

下面的代码片段是我在哪里。它似乎比视窗高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中水平和垂直居中。我想换句话说，单元格div需要增长，直到高度或宽度到达父节点并在那里停止。相反，它似乎会一直增长，直到宽度达到父元素的宽度，即使高度高于父元素。

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

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

编辑2:

只是为了更明确，这是我对解决方案的期望:

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

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

我已经很长时间没有使用bootstrap了，所以对它的类不太熟悉了;)，但我认为如果你真的想使用它，你可以很容易地在bootstrap框架中找到匹配的类来复制这个实现所需的小CSS(主要看实用程序类)

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>

相关内容

最新更新

热门标签：