Как сделать динамическую высоту DIV

Question

У меня есть float: left сидером <div>, который имеет min-height, установленный в 500px.

Область содержания <div> слева также имеет min-height из 500px.

То, что я не могу показаться, чтобы выяснить это: если высота содержания <div> идет над 500px из-за длительное содержание страницы, как я могу получить врезку <div> расти вниз пиксель-в-пиксель, сопоставляя высоту содержимого <div>, чтобы он все еще касался нижнего колонтитула <div>, который ниже обоих (он использует clear: both)?

В настоящее время CSS для содержимого, боковой панели и нижний колонтитулы <div> «s:

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

Answer 1

Я думаю, что вы ищете FlexBox

Здесь мы идем: CSS - Equal Height Columns?

Я надеюсь, что я помог ya, удачи.

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>