我可能有点晚了，但我找到了一个周围的工作，可能是一个hack。 首先给父层一个弯曲和100vh的高度

就像这样:

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}

高度:< % >将只工作，如果你所有的父节点都具有指定的百分比高度和固定的高度(像素，ems等)在顶层。这样，高度就会随你的喜好而下降。

您可以像前面提到的@Travis那样为html和body元素指定100%，以使页面高度向下级联到节点。

注意:此答案适用于不支持Flexbox标准的旧浏览器。有关现代方法，请参见:https://stackoverflow.com/a/23300532/1155721

我建议你看看跨浏览器CSS的等高列，没有黑客。

基本上，以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单)，所以请找到一个适当的预打包解决方案。

同样，答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高，答案就略有不同。

使用jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

这个答案是不理想的，因为CSS flexbox和网格实现到CSS。然而，这仍然是一个可行的解决方案

在一个较小的屏幕上，你可能希望保持高度自动，因为col1, col2和col3是相互堆叠的。

然而，在媒体查询断点之后，您希望所有列的cols都以相同的高度紧挨着出现。

1125 px只是窗口宽度断点的一个例子，在此之后，您将希望将所有列设置为相同的高度。

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

当然，如果需要，还可以设置更多的断点。

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

2021年的读者:

试试这个:

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

以下是我正在做的事情: