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和col2目前都有height: auto;但是，我的col2总是比我的col1大。我不希望我的col2具有特定的高度。但是，我希望我的col1始终为全高，因此匹配任何高度col2。

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

Answer 1

是的，您可以使用flexbox或table：

执行此操作

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果不使用前缀，您应该非常安全，但请务必查看caniuse。祝你好运

Answer 2

使用display:table-cell。它会使它们的高度相同。
也使用vertical-align:top，因此文本将始终位于col

的顶部

点击此处 jsfiddle

css代码：

.row {
  display:table;
}
.col1,.col2 { 
  display: table-cell;
  width:300px;
  veritcal-align:top;
}
.col1 { 
  background:red
}
.col2 { 
  background:blue;
  height:200px;
}

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

2 个答案: