Автоматическая настройка высоты поплавка CSS

Question

У меня есть мой код CSS. Моя проблема заключается в том, что когда контент имеет много вещей, он настраивает его высоту больше высоты навигации. То, что я хочу, - это когда одна из этих высоты поплавка регулирует, она включает и другую.

<div id="main"> 
    <div id="navigation"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 

код CSS ниже:

#main{ 
    width: 960px; 
    height: 500px; 
    margin: auto; 
} 
#navigation{ 
    float: left; 
    width: 200px; 
    background-color: #C7E1BA; 
} 
#content{ 
    float: right; 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
} 
#content, #navigation { 
    height: 100%; 

} 
#footer{ 
    clear: both; 
    width: 960px; 
    height: 100px; 
    background-color: #628B61; 
    margin: auto; 
} 

Answer 1

Вы можете установить как #navigation и #content к display: table-cell, а затем избавиться от float-х на них обоих. Это должно делать свое дело. Если вы хотите минимальную высоту, вы можете просто установить ее на одном из div, а другой div последует примеру. Это должно работать в all browsers and IE8+.

#navigation{ 
    width: 200px; 
    background-color: #C7E1BA; 
} 
#content{ 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
} 
#content, #navigation { 
    display: table-cell; 
} 

Вот jsFiddle

Answer 2

попробовать это:

#content{ 
    float: right; 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
    display:table; 
} 

Answer 3

Добавьте же отступы в #navigation, как и #content. Измените класс CSS, как показано ниже

#navigation{ 
    float: left; 
    width: 180px; 
    background-color: #C7E1BA; 
    padding : 10px; 
} 

Answer 4

Какой прекрасный случай использования для FlexBox!

#main{ 
 
    width: 960px; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#navigation{ 
 
    min-height: 400px; 
 
    width: 200px; 
 
    background-color: #C7E1BA; 
 
} 
 
#content{ 
 
    width: 760px; 
 
    background-color: #F6E4CC; 
 
} 
 

 
#footer{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #628B61; 
 
}

<div id="main"> 
 
    <div id="navigation"></div> 
 
    <div id="content"></div> 
 
    <div id="footer"></div> 
 
</div>