CSS:强制列始终具有完整高度

Question

我有以下html:

<div style="height: 80px">
   ...
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col1">...</div>
    <div class="col-xs-10 col2">...</div>
  </div>
</div>

我的col1和my col2目前都有.height: auto;然而,我col2总是比我的大col1.我不希望我col2有一个特定的身高.但是,我希望我的col1身高始终如此高,所以无论高度如何都要匹配col2.

我怎样才能在css/sass中实现这一目标？

Answer 1

是的,你可以使用flexbox或者table:

.row.equal {
  display: table;
}
.row.equal .column {
  display: table-cell;
  
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

.row.equal.flex {
  display: flex;
}
.row.equal.flex .column {
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

<div class="row equal">
  <div class="column">
    Equal height column using the table property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

<div class="row equal flex">
  <div class="column">
    Equal height column using the flex property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

不使用前缀你应该非常安全,但一定要查看caniuse.祝好运