Question

我正在尝试创建一个容量为2 div的容器，第一个容器需要保持其内部相对内容的高度，例如文本，另一个需要填充其容器父母身高，无论其内部是否有内容。

<div class="row">
    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3" id="column">
        <div id="column-name" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">TEXT</div>
        <div class="card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " id="card-list-1">
            <!-- here are divs that fill this card-list up -->
        </div>
    </div>
</div>

#column是包含其他2个div的{{1}}。我希望div根据内容更改其高度（在这种情况下，只有内部文本），但我希望#column-name填充#card-list-1的高度，事件的其余部分里面没有内容。 #column使用页面中的其他列调整自身大小，因此根本不能处理它的高度。
我尝试使用#column，但出于某种原因，flex和#column-name都调整了相同数量，即父级高度的两倍。
这是#card-list-1：

css

这实际上是具有4列的设计的一部分，#column{ background-color: transparent; padding: 2px; } #column-name{ font-weight: bold; font-size: 12px; text-align: center; background-color: rgb(241, 241, 241); border-top-left-radius: 3px; border-top-right-radius: 3px; height: 18px; } .card-list{ margin-bottom: 10px; border: 2px solid transparent; background-color: rgb(230, 230, 230); padding: 10px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 2px solid transparent; }被拖放到'卡列表'中。我真的更喜欢div或css解决方案，因此它也可以在移动平台上使用。
谢谢。

编辑：如果我在bootstrap上使用flex:1，我会得到这样的结果：
在before之前在enter image description here之后

还指向问题代码的链接：https://codepen.io/anon/pen/GyrrvZ

Answer 1

您需要使用flex和column方向。在这两个版本中，您使用的是col-*-12，因此您希望它们是全宽的，这将通过列方向完成，因此您也可以省略这些类。然后简单地制作第二个flex:1，以便剩下的空格：

#column {
  background-color: transparent;
  padding: 2px;
  height: 300px; /*added a height to illustrate*/
  display: flex; /* new */
  flex-direction:column; /* new */
}

#column-name {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  background-color: rgb(241, 241, 241);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  height: 18px;
}

.card-list {
  flex: 1; /* new */
  margin-bottom: 10px;
  border: 2px solid transparent;
  background-color: rgb(230, 230, 230);
  padding: 10px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 2px solid transparent;
}

<div class="col-xs-3" id="column">
  <div id="column-name">TEXT</div>
  <div class="card-list" id="card-list-1">
    <!-- here are divs that fill this card-list up -->
  </div>
</div>

Bootstrap Div填充父级高度

1 个答案: