引导程序列全高，如果需要，带滚动条

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#标志框：

• 占用所有可用的垂直空间(容器有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
});
})