Question

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

目前，我的右边div没有填满100％的高度，我不知道出了什么问题？

HTML divs是：

<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

快速Google search给了我以下链接。这些方法非常适合做你想要做的事情。

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

您的代码无法正常工作的基本原因是因为元素的高度计算方式与您预期的不同（它与宽度不同）。 This article可以很好地解释它是如何计算的。

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/

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

2 个答案: