-1

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

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

HTML div 是：

<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%;    
}
4

2 回答 2

3

一个快速的谷歌搜索给了我以下链接。这些方法对于做你想做的事情很常见。

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

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

于 2012-07-10T23:09:16.000 回答
0

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

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

于 2012-07-10T23:42:04.730 回答