Behalten Sie 100% Höhe von Spalten mit dynamischem Inhalt bei

Question

In einem zweispaltigen Layout, in dem eine Spalte statisch ist und die andere einen generierten Inhalt hat, wie können beide beibehalten werden, um 100% der Höhe des Wrappers zu sein?

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

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

Answer 1

Flexbox das tun können:

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

Das Problem hier kommt vom Schwimmer. In der Tat möchten Sie zwei floated Elemente die gleiche Höhe festlegen. Werfen Sie einen Blick auf dieses Ticket HTML/CSS: Making two floating divs the same height

Versuchen Sie, etwas Inhalt in der rechten Spalte hinzuzufügen, Sie werden sehen, dass es funktioniert. Hoffe, es hilft;)