试着让最低利润率达到100%。

margin-bottom: 100%;

基于本文中描述的方法，我创建了.Less dynamic解决方案:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

少:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

这是设计师一直在处理的一个令人沮丧的问题。诀窍是你需要在CSS中的BODY和HTML上设置高度为100%。

html,body {
    height:100%;
}

这段看似毫无意义的代码是为了向浏览器定义100%的含义。的确令人沮丧，但这是最简单的方法。

我有同样的问题，它的工作基于Hakam Fostok的答案，我已经创建了一个小例子，在某些情况下，它可能不需要添加显示:flex;而弯曲方向:圆柱;在父容器上

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

你可以把display: flex到div#主，align-self: stretch到div#导航。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}    

这个答案是不理想的，因为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>