Question

我有一个float: left侧边栏<div>，min-height设置为500px。

左侧的内容区<div>也有min-height 500px。

我似乎无法弄清楚这一点：如果内容<div>的高度由于页面内容较长而超过 500px，我该如何获得侧边栏<div>向下逐像素增长，匹配内容<div>的高度，以便它仍然触及低于这两者的页脚<div>（它使用{{} 1}}）？

我可以使用表来执行此操作，但我真的更愿意找到CSS来做更多...＆＃34;正确。＆＃34;

内容，侧边栏和页脚clear: both的当前CSS：

<div>

Answer 1

我认为您正在搜索FlexBox

我们走了：CSS - Equal Height Columns?

我希望我能帮助你，祝你好运。

Answer 2

你只需要一些简单的CSS，有两列，设置它们的宽度，浮动一面或另一面，然后使用div标签清除这些列将确保在此之后出现的任何内容都会在下面呈现。

.clr {
  clear: both;
}

.column1 {
  width: 500px;
}

.column2 {
  float: right;
  width: 300px;
}

<div class="column1">
no matter how big this, does nto matter
</div>

<div class="column2">
this does not matter
</div>

<div class="clr"></div>

<div class="footer">
This is my footer
</div>

如何制作动态高度DIV

2 个答案: