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 stuff that I思想应该奏效，但这显然是我所缺少的。

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

我的问题：我缺少什么？

Answer 1

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

为了达到你想要的设计（即10％标题，90％的身体），我会将身体容器的高度设置为90％。表格布局将保证子表格行和表格单元格“divs”自然扩展并占据所有空间。

这是demo。

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

display-table没有按预期工作 - 左，右列

1 个答案: