如果您准备使用一点jQuery，答案很简单!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

这可以很好地将单个元素浮动到父元素高度100%的一侧，而其他通常环绕的浮动元素则保持在一侧。

希望这对jQuery爱好者有所帮助。

如果您准备使用一点jQuery，答案很简单!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

这可以很好地将单个元素浮动到父元素高度100%的一侧，而其他通常环绕的浮动元素则保持在一侧。

希望这对jQuery爱好者有所帮助。

只要你不需要支持IE8之前的版本，你可以使用display: table-cell来实现:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

这将迫使具有.inner类的每个元素占用其父元素的全部高度。

对于父节点:

display: flex;

您应该添加一些前缀http://css-tricks.com/using-flexbox/

编辑: 唯一的缺点是IE和往常一样，IE9不支持flex。 http://caniuse.com/flexbox

编辑2: 正如@toddsby所指出的，align items是针对父元素的，它的默认值实际上是stretch。如果你想要不同的child值，有align-self属性。

编辑3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

这是等高网格系统的代码示例。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

上面是外部div的CSS

#inner{
width: 20%;
float: left;
border: 1px solid;
}

上面是内部div

希望这对你有所帮助

实际上，只要父元素处于定位状态，您就可以将子元素的高度设置为100%。也就是说，如果你不希望父节点被完全定位。让我进一步解释:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>