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

rks48beu  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(111)

我正在使用Bootstrap 5来尝试创建一个我认为非常简单的布局。我想显示一个MxN网格的单元格。每个单元格大小相同。我想让它填充整个视口，而在任何方向上都没有滚动条。滚动条是我卡住的地方。
我在不同的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并停止在那里。相反，它似乎增长到宽度达到父div的宽度。即使身高比父母高。
此外，我应该澄清行数/列数是动态的，因此这可能会影响解决方案的工作方式，因为我无法硬编码任何与行数和列数相关的大小调整。
如果有帮助的话，最终目标是有一个视频网格，必须在一个屏幕上显示，而不需要滚动。

编辑2：

为了进一步澄清，下面是我对解决方案的期望：
1.没有滚动条。这可能是在用户不能滚动的情况下使用的。
1.不管布局中有多少行/列，都需要工作，尽管可以合理地假设有足够少的单元格，内容仍然很容易看到。
1.每个单元格的内容将是视频。
1.所有视频都需要具有相同的宽高比。
1.由于单元格尺寸不太可能与视频纵横比匹配，因此视频需要在单元格中水平和垂直居中。
1.用户可能会调整浏览器的大小，因此需要相应地调整大小。
1.理想情况下，我更愿意坚持使用bootstrap或直接使用css，但如果这不可能，我会考虑其他选择。

css

1条答案

按热度按时间
yeotifhr

yeotifhr1#

不能100%确定下面的内容是否是您想要的，但请看一看。注意，它使用了CSS 4属性aspect-ratio，请在此处阅读更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio，并在此处查看浏览器支持https://caniuse.com/mdn-css_properties_aspect-ratio
我已经很长时间没有使用bootstrap了，所以对它的类不太熟悉了;），但我认为如果你真的想使用它，你可以很容易地在引导框架内找到匹配的类来复制这个实现所需要的小CSS（主要看实用程序类）
PS：忽略JS代码，它只是用于演示目的，以便您可以动态地添加或删除网格中的项目，并查看它的React。

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>
赞(0）分享  回复(0）举报  2022-12-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com