保持具有动态内容的列的100%高度

Maintain 100% height of columns with dynamic content

本文关键字：100% 高度 动态      更新时间：2023-09-26

在两列布局中，其中一列是静态的，另一列生成了内容，如何将两者都保持为包装器的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>

这里的问题来自浮点运算。事实上，您希望为两个浮动元素设置相同的高度。看看这张票HTML/CSS：制作两个相同高度的浮动div

试着在右栏中添加一些内容，你会发现它是有效的。希望它能有所帮助；）

相关文章：