Question

我在包装器中有2列。一列高于另一列。我希望较短的列的高度为100%，以便它与较高的列匹配。所有高度都是动态的，因此无法以像素为单位进行定义。

<div class="wrapper">
    <div class="col1"> short column // not much content </div>
    <div class="col2"> tall columns // lots of content </div>
</div>

您将在示例中看到红色列高于蓝色列。如何将蓝色列设置为包装器的100%高度。

我知道我可以通过定义高度轻松完成此操作，这不是一个选项。如果我使用表格进行布局，我也可以这样做，我不想这样做。我也可以通过使用javascript从高柱中获取高度然后设置较小列的高度来完成此操作。我想要一个只有CSS的方法。谢谢。

Answer 1

使用一点jQuery，你可以实现这一点，看看https://jsfiddle.net/20d2an0n/

$(document).ready(function(){
    var blue_height = $('.col1').height();
    var red_height = $('.col2').height();
    if(blue_height < red_height)
        $('.col1').height(red_height);
    else
        $('.col2').height(blue_height);
});

Answer 2

您的小提琴被修改：https://jsfiddle.net/ybywo28c/

使用flexbox的纯CSS解决方案：

.wrapper {
    display: flex;
    width: 300px;
}
.col1, .col2 {
    align-self: stretch;
    float: left;
    width: 140px;
    background: red;
}
.col1 {
    background: blue;
}

顺便说一句，如果从列中删除宽度属性并添加flex: 1;，它将在列之间均匀分配包装的宽度;）
IE 10需要-ms-前缀，IE8和9遗憾的是根本不支持它，在旧浏览器中，语法可能会有所不同 - 有些（例如Android 4.1和4.3）使用所谓的＆＃34;旧语法＆＃34 ;如果您有点好奇，请查看这些页面。

这是您可以获得的大多数跨浏览器解决方案，我从css-tricks.com复制粘贴：

.wrapper {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 300px;
}

.col1, .col2 {
  float: left;
  width: 140px;
  background: red;
}

.col1 {
    background: blue;
}

浮动元素100％高度动态包装

2 个答案: