0

我希望左右列的高度相同，最小高度为整个浏览器高度。

html:

<div id="outfit-wrapper" class="clearfix">

    <div id="header"></div> 

    <div id="outfit-body">  
        <div class="table-row">            

            <div id="outfit-area" class="table-cell">      
                whatever content
                <div class="footer">
                 content within #outfit-area (bottom of #outfit-area)
                    <div class="clearfix"></div>
                </div>                     
            </div>

            <!-- I WANT the green left column to be the same height as
            right blue column - how do I achieve this? -->

             <div id="products-area" class="table-cell">
                 here are some products. here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.here are some products.
                 <div class="clearfix"></div>
             </div>        

        </div> <!--end table row -->
    </div> <!-- end outfit-body-->

</div> <!--end outfit-wrapper-->

CSS：

/* clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-block; }
.clearfix { display: block; }

/* 100% height layout - header is 10% of this height, #outfit-area and #products-area 90% */
html,body {margin: 0;padding: 0;height:100%;}
body {background: #ffffff;font-family: 'Noto Sans', sans-serif; font-size:13px;}

#header {
    position:relative;
    margin:0;
    padding:0;
    height:10%;
    width:100%;
    min-height:45px; /* Min-height is used because loogotype must be visible to user */
    background:yellow;
}


#outfit-body {
    display:table;   
}

.table-row {
    display:table-row;
}

.table-cell {
    display:table-cell;
    vertical-align:top;
}

#outfit-wrapper {
    position:absolute;
    width:98%;
    margin-left:1%;
    margin-right:1%; 
    min-height: 100%;
    height: 100%;    
    padding:0;
}

/* left column */
#outfit-area {
    position:absolute; /* I must have this here so 100% height can be achieved (because I have percentage height in parent div #outfit-wrapper */
    min-height:90%; /* header is 10% of the total height */
    width:60%;
    overflow: hidden;
    border-top:1px solid #acacac;
    border-left:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
    background:green;
}

#products-area {
    width:40%;
    height:90%; /* header is 10% of the total height */
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
    background-color:blue;
}

#outfit-area .footer {
    display:table-cell;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    line-height:40px;
    border-top:1px solid #dfdfdf;
}

看看jsfiddle：http: //jsfiddle.net/TgM7t/24/

我希望左（绿色）列与蓝色的高度相同（即使右列变高，那么绿色应该是相同的高度）我尝试了 display:table, table-cell, table-row 的东西，我认为应该可以工作，但这显然是我缺少的东西。

我知道关于这个主题有很多问题和答案，但我真的找不到我要找的东西......

我的问题：我错过了什么？

4

1 回答 1

1

强制其中一个表格单元格的高度将导致行高不相应调整。在您的情况下，正是css 中的position: absolute;和行导致单元格扩展到行之外。min-height:90%;#outfit-area

为了实现您正在寻找的设计（即 1​​0% 标题，90% 主体），我会将主体容器的高度设置为 90%。表格布局将保证子表格行和表格单元格“div”自然扩展并占据所有空间。

这是一个演示。

css中相应的修改为：

#outfit-body {
    display:table;   
    height: 90%;
}

这已经解决了这个问题，但我也会摆脱孩子们不必要的身高线（在下面用“删除”提及）：

#products-area {
    width:40%;
    /*height:90%;*/ /* header is 10% of the total height */ /*removed*/
    border-right:1px solid #dfdfdf;
    border-top:1px solid #acacac;
    background-color:blue;
}

#outfit-area {
    /*position:absolute;*/ /*removed*/ /* I must have this here so 100% height can be achieved (because I have percentage height in parent div #outfit-wrapper */
    position: relative; /*added because outfit area contains children div*/
    /*min-height:90%;*/ /*removed*/ /* header is 10% of the total height */
    ......
于 2013-08-24T10:35:54.053 回答