时间戳

首页 > 解决方案 > 拉紧在没有任何滚动条的情况下填充弹性项目

html - 拉紧在没有任何滚动条的情况下填充弹性项目

问题描述

我正在使用 Bootstrap 5 并尝试设置一个填充窗口的嵌套弹性布局，其中一个弹性项目由一个“弹性”填充<canvas>（所以任何地方都没有滚动条）。

w-100出于某种原因，使用和实用程序创建画布h-100（相当于将 CSS 宽度和高度设置为 100%）正在页面上创建一个垂直滚动条。我在互联网上看到了许多类似的问题，但它们几乎都处理flex-direction: row并且似乎不适用于我的column场景。我不知道这是否是 Bootstrap 中的错误，或者我只是误解了嵌套的弹性容器和/或画布。

这是重现该问题的 Codepen：https ://codepen.io/Rabadash8820/pen/eYWwXxx

这是 HTML 正文：

<body class="d-flex flex-column vh-100">

  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    Alert alert!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Warning"></button>
  </div>

  <header>
    Header content
  </header>

  <div class="flex-grow-1 d-flex">
    <div class="flex-grow-1 d-flex flex-column">
      <main class="flex-grow-1 bg-dark">
        <canvas class="d-block w-100 h-100"></canvas>
      </main>
      <footer>Footer content</footer>
    </div>
    <div class="w-25"><h2>Options</h2></div>
  </div>
</body>

标签： htmlcsstwitter-bootstrapflexboxbootstrap-5

解决方案

从默认切换min-height: auto到min-height: 0弹性项目以抑制canvas.

您会看到滚动条，因为当您设置width: 100%为 时canvas，它会尝试保持其 2:1 的纵横比，这会影响其高度。该高度会传达给canvasflex 容器中的 flex 项的父级。默认情况下，弹性项目不会缩小到其min-content大小以下，这会受到纵横比的影响。

为了防止这种情况发生，您可以设置min-height: 0您的<div class="flex-grow-1 d-flex">和<main class="flex-grow-1 bg-dark">元素，如下所示：

<div class="flex-grow-1 d-flex" style="min-height: 0;">
  <div class="flex-grow-1 d-flex flex-column">
    <main class="flex-grow-1 bg-dark" style="min-height: 0;">
      <canvas class="d-block w-100 h-100"></canvas>
    </main>
    <footer>Footer content</footer>
  </div>
  <div class="w-25"><h2>Options</h2></div>
</div>

然后，他们会让他们的 flex 容器缩小它们，然后你的canvas设置100% width和height将引用那个缩小的大小。

如果您不想编写自定义 CSS，我想解决方案是找到与 setting 对应的 Bootstrap 类min-height: 0。

推荐阅读