在双列布局中,一列是静态的,另一列已生成内容,如何将两者都保持为包装器高度的 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
var el = '<div class="thing">Hi</div>'
var $right = $('.right')
for (var i = 0; i < 20; i++) {
var $el = $(el);
$right.append($el)
}
最佳答案
Flexbox 可以做到这一点:
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>
关于javascript - 使用动态内容保持列的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38484580/