基于本文中描述的方法，我创建了.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;
            }
        }
    }
}

经过长时间的寻找和尝试，没有什么能解决我的问题

style = "height:100%;"

关于儿童div

对于父母应用这个

.parent {
    display: flex;
    flex-direction: column;
}

此外，我使用bootstrap，这并没有腐败的响应为我。

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

您可以像前面提到的@Travis那样为html和body元素指定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();
});

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.
}

以下是我正在做的事情:

这道题的题目和内容有点矛盾。标题说的是父div，但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。

你(a)希望导航和内容都是主高度的100%，还是(b)希望导航和内容是相同的高度?

我假设(b)……如果是这样的话，我不认为你将能够做到这一点，因为你目前的页面结构(至少，不是纯CSS和没有脚本)。你可能需要这样做:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

并将内容div设置为左侧空白，无论导航窗格的宽度是多少。这样，内容的内容就在导航栏的右边，你可以将导航栏的高度设置为内容高度的100%。

编辑:我完全是在我的头脑中做的，但你可能还需要将导航div的左侧空白设置为负值，或将它的绝对左侧设置为0，以将它推回到最左边。问题是，有很多方法可以实现这一点，但并不是所有的方法都能与所有浏览器兼容。