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

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

如果我理解正确的话，你想将绿色块覆盖到蓝色块中。它无法设置高度，因为两个块之间有文本（两个）。<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">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-sm-6" style="background-color: red">&nbsp; &nbsp; &nbsp; <p>Some</p>&nbsp; &nbsp; &nbsp; <p>More</p>&nbsp; &nbsp; &nbsp; <p>Content</p>&nbsp; &nbsp; &nbsp; <p>Here</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-sm-6" style="background-color: blue">&nbsp; &nbsp; &nbsp; <section class="d-flex h-100" style="background-color: green">&nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-danger m-auto">Centered Button</button>&nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; </div>&nbsp; </div></div>