Html 如何制作动态高度DIV

我有一个

float:left

siderbar

，它的

minheight

设置为

500px

其左侧的内容区

也具有

500px

的

min height

我似乎无法理解的是：如果由于页面内容较长，内容的高度

超过了500px，如何使侧边栏

逐像素向下增长，与内容的高度相匹配，因此，它仍在接触两个页脚下方的页脚（它使用了

清除：两个
）

我可以使用一个表来做这件事，但我真的更愿意找到CSS来做更多。。。“适当地。”

内容、侧栏和页脚的当前CSS
：

#ContentHolder
{
    float:left;
    padding-left: 10px;
    width: 590px;
    min-height: 500px;
}

#SideBar
{
    float: left;
    width: 200px;
    min-height: 500px;
    background-color: #4a4a4a;
    border-top: 2px solid #404040;
    border-top-left-radius: 7px;
    background-image: url('Images/SideBar.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}

#Footer
{
    clear: both;
    background: #404040;
    font-size: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #707070;
    text-shadow: 0 1px 0 #202020;
}

我想您正在搜索
FlexBox

我们开始：

我希望我能帮助你，
祝你好运。
你只需要一些简单的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>

.clr{
明确：两者皆有；
}
.专栏1{
宽度：500px；
}
.专栏2{
浮动：对；
宽度：300px；
}
不管这有多大，都没关系
这无关紧要
这是我的页脚
漂亮！我不知道这个存在。只是在两列周围添加了一个DIV，并将DIV的css设置为display:flex。