Question

我有一个父级col，其高度基于视口，我有三行作为孩子。

应为每个孩子分割父母的身高，以便他们占用父母可用空间的相等部分。

给予height: 33%超级蹩脚，我无法找到一种方法来正确地做到这一点。

<div class="col-md-12" style="height: 25vh;">
  <div class="row">
    <!--Content-->
  </div>
  <div class="row">
    <!--Content-->
  </div>
  <div class="row">
    <!--Content-->
  </div>
</div>

问题可能重复，但我不知道如何正确制定我的请求。

Answer 1

＆＃13;

.box{
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.row{
  background: gray;
  margin: 1px 0px;
  flex: 1;
}

＆＃13;

<div class="col-md-12 box" style="height: 25vh;">
  <div class="row">
    <!--Content-->
  </div>
  <div class="row">
    <!--Content-->
  </div>
  <div class="row">
    <!--Content-->
  </div>
</div>

＆＃13;

尝试使用display:flex

扩展孩子的高度以填补父母的div

1 个答案: