html - 显示表没有按预期工作 - 左，右列

Question

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

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 东西想法应该可行，但这显然是我所缺少的东西。

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

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

Answer 1

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

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

这是一个demo .

css中对应的修改是:

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

这已经解决了这个问题，但我也会去掉 child 身上不必要的高度线(在下面用“删除”提及的方式注释掉):

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