CSS：强制列始终具有全高[重复]

Posted 2023-03-06

【中文标题】CSS：强制列始终具有全高[重复]

【英文标题】：CSS: Force a column to always have full height [duplicate]

【发布时间】：2016-10-30 17:22:32

【问题描述】：

我有以下 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 中实现这一点？

【问题讨论】：

可以设置 column1 & column2 的固定高度

【参考方案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。祝你好运

【参考方案2】：

使用 display:table-cell 。这将使它们具有相同的高度。 也使用vertical-align:top，这样文本将始终位于列的顶部

看这里jsfiddle

css代码：

.row 
  display:table;

.col1,.col2  
  display: table-cell;
  width:300px;
  veritcal-align:top;

.col1  
  background:red

.col2  
  background:blue;
  height:200px;