将 Bootstrap 行高设置为填充高度，但也受容器高度的约束答案

【问题标题】：Set Bootstrap row height to fill height but also be constrained by the height of a container将 Bootstrap 行高设置为填充高度，但也受容器高度的约束
【发布时间】：2020-11-27 06:15:44
【问题描述】：

可能是一个简单的问题.. 我有一个容器。该容器有 X 行。这些行应该完全填满容器，高度。这些行不应扩展到容器之外。我不想手动设置行的高度。

如果我将class="h-100" 设置为行，则第一个采用容器的全高，其他渲染在容器外部...我认为父级的高度会设置内部元素的高度约束...

我觉得这应该很简单，但我似乎找不到正确的类/样式组合。

<html lang="en" style="
    height: 100%;
"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  </head>
  <body style="height: 100%;">
    <div class="container-fluid h-100">
      <div class="row">row 1</div>
      <div class="row">row 2</div>
    </div>
  </body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

作为参考，这是我找到的最干净的解决方案。似乎是 flexbox（d-flex 类）的一个特性，共享可用空间，使用flex-fill。

但默认情况下它将共享可用的width。设置flex-column 会更改方向，使其共享可用的height。

<html lang="en" style="
    height: 100%;
"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body style="
    height: 100%;
">
<div class="container-fluid h-100 d-flex flex-column">
    
  <div class="flex-fill">
      ROW 1 
  </div>

  <div class="flex-fill">
      ROW 2 
  </div>

  <div class="flex-fill">
      ROW 3 
  </div>

</div>
  
</body></html>

【讨论】：