Question

在两列布局中，一列是静态的而另一列是生成内容的，如何将两者保持为包装器高度的100％？

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可以做到这一点：

＆＃13;

$(function() {    
    $("div[data]").each(function() {
        var data = $(this).attr("data");
        var chance = new Chance(Math.Random);
        $(this).append(chance[data]());
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这里的问题来自浮动。实际上，您希望将相同的高度设置为两个浮动元素。看看那张票HTML/CSS: Making two floating divs the same height

尝试在右栏中添加一些内容，您会发现它有效。希望它有所帮助;）

使用动态内容保持100％高度的列

2 个答案: