Html 显示表未按预期工作-左、右列

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

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

/* 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;
}

看看JSFIDLE：

我希望左（绿色）列的高度与蓝色列的高度相同（即使右列变得更高，那么绿色列的高度也应该相同），我尝试了显示：表、表单元格、表行的内容，我认为应该可以工作，但显然我缺少了一些东西

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

---

我的问题：我遗漏了什么？

强制一个表格单元格中的高度将导致行高度不相应调整。在您的情况下，它是

位置：绝对和<代码>最小高度：90%在
#装备区
的css中导致单元格扩展到行之外的行

为了实现您所期望的设计（即10%的标题，90%的主体），我将主体容器上的高度设置为90%。表布局将保证子表行和表单元格“div”自然扩展并占用所有空间

这是一本书

css中的相应修改包括：

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

这已经解决了这个问题，但我也会消除孩子们不必要的身高线（下面用“删除”一词注释）：

好的，谢谢！问题是，您的演示也不能像我所希望的那样工作，因为.footer不在左栏的底部（#装备区）。我猜这是因为装备区没有位置：绝对与你的解决方案？我测试了一个垂直对齐：bottom with.footer类，但也不起作用（即使我去掉了position:absolute；bottom:0 for.footer）@bestprogrammerintheworld只需添加
position:relative至
#装备区
。查看我的编辑（也更新了演示）。@edisoufi-出于某种原因，这在FF中似乎不起作用。。。有什么想法吗？：-）本文最好地解释了如何垂直分割表单元格div:。这会让你走上正轨。我不打算更新答案，因为在你原来的帖子中，你只要求两个栏的高度相同，所以最好在评论中留下更多信息…：）谢谢我来看看！：-）我希望我能投你更多的票：-）
#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 */
    ......