動的コンテンツを使用して列の高さを100％維持

Question

2列のレイアウトでは、一方の列が静的でもう一方の列がコンテンツを生成した場合、どのように両方をラッパーの高さの100％に保つことができますか？

https://jsfiddle.net/t1h4vngv/1/

HTML

<div class="wrapper"> 
    <div class="col left"> 
    Static stuff 
    </div> 
    <div class="col right"> 
    Dynamic Stuff 
    </div> 
</div> 

CSS

html, 
body, 
.wrapper, 
.col { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.col { 
    float: left; 
} 

.left { 
    background: lightblue; 
} 

.right { 
    background: lightgreen; 
} 

.thing { 
    width: 200px; 
    height: 100px; 
    background: beige; 
    border: 2px solid grey; 
} 

JS

Answer 1

フレキシボックスはそれを行うことができます。

var el = '<div class="thing">Hi</div>' 
 
var $right = $('.right') 
 
for (var i = 0; i < 10; i++) { 
 
    var $el = $(el); 
 
    $right.append($el) 
 
}

html, 
 
body, 
 
.wrapper, 
 
.col { 
 
    min-height: 100%; /* note min-height */ 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.left { 
 
    background: lightblue; 
 
} 
 

 
.right { 
 
    background: lightgreen; 
 
} 
 
.thing{ 
 
    width:200px; 
 
    height:100px; 
 
    background:beige; 
 
    border:2px solid grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="col left"> 
 
    Static stuff 
 
    </div> 
 
    <div class="col right"> 
 
    Dynamic Stuff 
 
    </div> 
 
</div>

Answer 2

ここで問題となるのはフロートです。実際には、2つの浮動要素に同じ高さを設定する必要があります。そのチケットを見てくださいHTML/CSS: Making two floating divs the same height

右の列にいくつかのコンテンツを追加しようとすると、動作することがわかります。それがお役に立てば幸いです。）