如何将 div 高度设置为父高度的 100%？

Question

无论卡片上有多少内容，我都需要那个始终粘在底部的按钮。 并且引导 class mt-auto 到按钮这样做，但是当我将高度设置为所有 div 的 100% 时，当列有 class col-12 时，我在卡体中的行从 lg 断点溢出。 我在这里缺少什么？ 为什么会溢出，为什么没有将高度设置为父 div 的 100%？

带有演示的代码示例在这里：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row mx-0 gy-4"> <div class="col-12 d-flex col-md-6"> <div class="card bg-info"> <div class="card-body h-100 position-relative"> <div class="row mx-0 h-100"> <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px"> <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/> </div> <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100"> <p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="btn btn-primary w-auto mt-auto">Watch more</button> </div> </div> </div> </div> </div> <div class="col-12 d-flex col-md-6"> <div class="card bg-info"> <div class="card-body h-100 position-relative"> <div class="row mx-0 h-100"> <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px"> <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/> </div> <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100"> <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button class="btn btn-primary w-auto mt-auto">Watch more</button> </div> </div> </div> </div> </div> </div>

Answer 1

当您对行使用 flex 时，您可以尝试对每个卡元素使用flex-grow: 1 （iirc 的引导程序 class 只是flex-grow ）。 然后你只需要在顶级行 div 上设置一个最大高度。