Question

我有一个简单的2列布局，我想使用Flexbox达到相同的高度：

HTML

<div class="row flex">
    <!-- menu -->
    <div class="col-xs-4">
        <aside>
            Menu goes here
        </aside>    
    </div>
    <!-- content -->
    <div class="col-xs-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus. Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p>
    </div>
</div>

CSS

body { color: red; }
.flex { display: flex; }
aside { background: #000; height: 100%; }

这适用于Firefox，但不适用于Chrome：here's a Fiddle

我尝试了一些东西（包括供应商前缀），但它仍然不起作用。

Answer 1

使用Flexbox创建两个相等的列：

父容器获取display: flex
每个列都是由div创建的，他们会flex: 1增长/缩小

拉伸第一列的孩子：

第一列也是display: flex，因此其子项可以具有弹性属性并且可以增长
给予旁边的孩子flex: 1并且会增长/缩小

This is the easiest guide to Flexbox you could ask for.

Flexbox兼容性： IE11+ and all modern browsers。

实施例

使用Bootstrap ：Here is the fiddle from your comment with my changes added.左侧的1px间距已被div.flex.row:before, div.flex.row:after { display: none }删除

相关答案：Remove 1px gap when using display:flex in Chrome

我已经剥离了这个例子的所有不必要的类。目前，两个列高度均由最高列确定。您还可以在Flex容器上使用height: 100vh填充页面的整个高度 - read more about viewport units here.

视口单元兼容性： Viewport Units are almost well supported。

要为列提供更大的宽度，请为其提供更大的弹性值。我已将此示例中的第二列更改为flex: 3，它将更宽。

＆＃13;

body {
  color: red;
  margin: 0;
}
.flex {
  display: flex;
  /*Should the columns span the entire height of the page? Use:
  height: 100vh;*/
}
.column {
  flex: 1;
}
.column:first-child {
  display: flex;
}
.column:last-of-type {
  background: #000;
  flex: 3;
}
aside {
  flex: 1;
  background: #F90;
}

＆＃13;

<div class="flex">
  <!-- menu -->
  <div class="column">
    <aside>
      Menu goes here
    </aside>
  </div>
  <!-- content -->
  <div class="column">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus.
      Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p>
    <p>Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo euismod pulvinar, lacus dui fringilla lectus, in tempus mi nulla semper ex. Integer feugiat,
      lectus a facilisis rutrum, ex magna tincidunt ligula, in suscipit turpis lorem quis neque. Suspendisse dictum, nulla at aliquet cursus, magna tellus mattis purus, nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis.
      Aenean id vestibulum nisl. Praesent sit amet tempor nulla, consequat viverra ante. Maecenas eu pretium lacus, a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula, nec fringilla mi.
      Quisque hendrerit purus eget urna semper sodales.</p>

  </div>
</div>

＆＃13;

Answer 2

这是我的解决方案，带有一点Modernizr和jQuery（带Equalize plugin）

http://jsfiddle.net/0Leymgbe/1/

这就是它的工作原理：

if ($().equalize) { // check if plugin is loaded
    $(window).on("resize", function () {
        (Modernizr.mq("(min-width: 768px)")) // if it's tablet or desktop...
        ? $('.row').equalize({reset: true}) // then equalize the columns
        : $('.row > div').css({'height': 'auto'}); //else reset to original height
    }).resize(); // trigger the resize on page load, too
}

在窗口调整大小（和加载时）Modernizr检查视口是否大于768px（平板电脑和桌面）：如果为true，则jQuery均衡列;如果为假（智能手机），原始高度将恢复

没办法（对我来说）让它简单地使用CSS3 flexbox

Chrome中的等高Flexbox列

2 个答案:

实施例