在列内展开容器以适应引导网格中的列高

Question

当我设置height: 100%或h-100时，为什么绿色容器会在蓝色列上展开？

我怎样才能使它刚好适合柱子的剩余高度？

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <h3>Content I want to keep</h2> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>

Answer 1

如果我理解正确，您想将绿色块覆盖到蓝色块中。

它无法设置高度，因为两个块之间有文本（ two ）。

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"> <div class="container" style="background-color: black"> <div class="row"> <div class="col-sm-6" style="background-color: red"> <p>Some</p> <p>More</p> <p>Content</p> <p>Here</p> </div> <div class="col-sm-6" style="background-color: blue"> <section class="d-flex h-100" style="background-color: green"> <button class="btn btn-danger m-auto">Centered Button</button> </section> </div> </div> </div>