html - 防止内容扩展到 Div 之外（并使其滚动）

Question

我有一些基本标记（使用 Bootstrap 4）：

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body">
        <div class="row">
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
        </div>
        <button type="button" class="btn btn-primary w-100 btn-lg mb-3">Insert</button>
      </div>
</div>

密码笔

我想要的很好，首先是内容不超出卡片:) 之后，我希望div包含图像（div.row）在分配按钮空间后占用剩余空间，并且让任何溢出的内容在其中垂直滚动div（即，在滚动上面的内容时，我需要按钮保持固定在卡片的底部div）。

首选带有 Bootstrap 类的解决方案，但自定义 CSS 也可以。我不想手动指定 的高度div.row，希望它自动填充剩余空间div.card-body（一些 flexbox 魔术？）。

谢谢您的帮助！

附言

我已经能够通过使用溢出自动将内容限制在卡片上，但前提是我在整个卡片主体上使用它，在这种情况下，按钮将随着图像内容滚动（不是我想要的）。

密码笔

标签： htmlcssbootstrap-4

Answer 1

您可以实现这样的场景。

.overflow-auto

预览示例

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body overflow-auto">
    <div class="row">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>

对于你的第二个问题：

如果这就是你的意思，是的，有一种方法：为此，我们使用 (flex) 结构。

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body h-100 d-flex flex-column">
    <div class="row overflow-auto">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>

或者按钮也在滚动内的第二种情况：

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body h-100 overflow-auto">
    <div class="row">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>