两列div布局填充父div的整个高度

Question

好吧，我相信这很常见，但我似乎在任何地方都找不到答案。基本上，我想要一个两列div布局，左列是流动的，右列是固定的。我想要这两列的高度来填充父容器分区。

目前，我的右侧div没有填充100%的高度，我不知道出了什么问题？

HTMLdiv是：

<div id="nmv_div_twoColumnLayoutContainer">
    <div id="nmv_div_twoColumnLeftContainer">
        <div id="nmv_div_twoColumnLeft">
            <p>the left div is good height</p>
            <p>As this is the div that will typically have the most data</p>
        </div>        
    </div>    
    <div id="nmv_div_twoColumnRightContainer" class="roundedCorners">
        <div id="nmv_div_twoColumnRight">
            the right div is a menu div but is only showing part            
        </div>        
    </div>
    <div class="clearBoth"></div>
</div>

和我关联的css

.roundedCorners {
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.clearBoth {
    clear: both;
}
div#nmv_div_twoColumnLayoutContainer 
{
    overflow: hidden;
}
div#nmv_div_twoColumnRightContainer 
{
    float: right;   
    margin-left: -250px;
    width: 250px;
    background-color: gold;
}
div#nmv_div_twoColumnLeftContainer 
{
    float: left;    
    width: 100%;
    background-color: red;
}
div#nmv_div_twoColumnLeft 
{
    margin: 0 260px 0 0;    
    height: 100%;
    background-color: yellow;
}
div#nmv_div_twoColumnRight 
{    
    width: 250px;
    background-color: green;     
    height: 100%;    
}

Answer 1

在谷歌上快速搜索得到了以下链接。这些方法在做你想做的事情时很常见

http://www.alistapart.com/articles/fauxcolumns/

http://www.vanseodesign.com/css/equal-height-columns/

http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

代码不起作用的基本原因是元素的高度计算方式与预期不同（与宽度不同）。这篇文章很好地解释了它是如何计算的。

Answer 2

如果菜单中的内容是静态的，并且您可以依靠它保持相同的高度，则可以将内容div上的min-height设置为菜单的高度，并绝对定位菜单。给容器一些适当的填充，这样内容就不会与菜单重叠。

.container {
    padding-right: 260px;
    position: relative;
}
.content {
    min-height: 100px;
}
.menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
}

http://jsfiddle.net/gilly3/Q5CRr/