html - 如果需要，带滚动条的 Bootstrap 列全高

Question

我有以下(某种)代码:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="min-height: 100vh;">
  <div class="row">
    <div class="col-8">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col">
              header
            </div>
          </div>
          <div class="row">
            <div id="logo-frame" class="col d-flex justify-content-center align-items-center">
              <img src="https://via.placeholder.com/1000x300" class="img-fluid overflow-auto">
            </div>
          </div>
          <div class="row">
            <div class="col">
              footer
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="card">
        <div class="card-body">
          side
        </div>
      </div>
    </div>
  </div>
</div>

图像是动态加载的，可以是任何大小和纵横比。我希望 div #logo-frame 为:

• 占用所有可用的垂直空间(容器有 min-height: 100vh 但我不确定如何让 div 用 flexbox 把它全部吃掉)并用空白填充图像，如果需要
• 让图像水平和垂直居中(我想我用 justify-content-center align-items-center 覆盖了它)
• 如果高度变得太大而无法显示图像(例如 https://via.placeholder.com/1000x2000 )，则显示滚动条，但仅在图像上显示，而不是在整个页面上显示(我认为 overflow-auto 就足够了, 但不确定...)

如何使用 flexbox 轻松实现此行为？谢谢

更新

以下代码正在运行。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="height : 100vh">
  <div class="row h-100">
    <div class="col-8 h-100">
      <div class="card h-100">
        <div class="card-body d-flex flex-column h-100">
          <div class="row">
            <div class="col">
              header
            </div>
          </div>
          <div class="row h-100 overflow-auto">
              <div id="logo-frame" class="col d-flex justify-content-center align-items-center">
                <img src="https://via.placeholder.com/1000x300" class="img-fluid">
            </div>
          </div>
          <div class="row">
            <div class="col">
              footer
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="card">
        <div class="card-body">
          side
        </div>
      </div>
    </div>
  </div>
</div>
</div>

谁能帮我理解:

1. 是否可以不必向下级联h-100？
2. 为什么我用 min-height:100vh 而不是 height:100vh 却不起作用？
3. 为什么如果我不把 d-flex flex-column 放在 card-body 元素上，它就不起作用
4. 是否有更好的方法来完成这项工作？

Answer 1

您是否考虑过在父容器中使用“max-height”css 属性以及溢出时的自动滚动？

根据您的要求更新

<!-- Add Slimscroll library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js" rel="stylesheet" />

重构标记

<div class="container-fluid" style="min-height: 100vh;">
<div class="row">
    <div class="col-8">
    <div class="card">
        <div class="card-body">
        <div class="row">
            <div class="col">
            header
            </div>
        </div>
        <div class="row">
            <!-- as indicated in style attribute: Add a class w/these attribs/values -->
            <div id="logo-frame" style="max-height: 1000px; overflow: hidden;" class="col d-flex justify-content-center align-items-center">
            <!-- you might need to remove the css selector: overflow-auto from the class attrib (Test it) -->
                <img src="https://via.placeholder.com/1000x1200" class="img-fluid">
            </div>
        </div>
        <div class="row">
            <div class="col">
            footer
            </div>
        </div>
        </div>
    </div>
    </div>
    <div class="col-4">
    <div class="card">
        <div class="card-body">
        side
        </div>
    </div>
    </div>
</div>

加载时实例化 Slimscroll

$(document).ready(function () {
    $('#logo-frame').slimScroll({  
        // According to slimscroll documentation - leave height empty      
        height: '',
        width: '100%',
        alwaysVisible: false
    });
})