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/

左（緑）の列を青と同じ高さにしたい（右の列が高くなっても緑は同じ高さでなければならない） 、しかし、それは明らかに私が欠けているものです。

この件に関して多くの質問と回答があることは知っていますが、探しているものが本当に見つかりません...

私の質問:何が欠けていますか?

4

1 に答える 1