Как сделать правый и левый div до конца?

Question

У меня есть домашняя страница. В теле divive есть три divs, правый div, левый div и центральный div. В центре div у меня есть @renderbody, который отображает конкретные виды. Я хочу, чтобы правая и левая высота div проходили до нижнего колонтитула. Как я могу сделать боковые divs той же высотой, что и центральный div, вплоть до нижней части нижнего колонтитула.

#body { 
    background-color:white; 
    margin-left:auto; 
    margin-right:auto; 
    width: auto; 
    padding: 10px; 
} 

#body-main-left { 
    background-color:rgba(100, 100, 100, 0.1); 
    float:left; 
    width: 150px; 
    height:auto; 

} 

#body-main-right { 
    background-color: rgba(100, 100, 100, 0.1); 
    float: right; 
    width: 150px; 
    height:auto; 
} 

#body-main-center { 
    margin: 0 150px 0 150px; 
} 
#footer { 
    clear: both; 
    background-color: black; 
    color: red; 
} 


<div id="container"> 
    <div id="header"> 
     <div id="header-banner"> 
      HeaderBanner image will reside here 
     </div> 
     <div id='cssmenu'> 
      <ul> 


<li class='active'>@Html.ActionLink("", "", "")</li> 
      <li>@Html.ActionLink("", "", "")</li> 
      <li>@Html.ActionLink("", "", "")</li> 
      <li>@Html.ActionLink("", "", "")</li> 
      <li>@Html.ActionLink("", "", "")</li> 
      </ul> 
     </div> 
    </div> 
    <div id="body"> 
     <div id="body-main-left">Left Block</div> 
     <div id="body-main-right">Right Block</div> 
     <div id="body-main-center">@RenderBody()</div> 
    </div> 
    <div id="footer"> 
     Footer copyright 
    </div> 
</div> 

Answer 1

Пример:

https://jsfiddle.net/9vd83rww/5/

Добавить padding-bottom: 0px; в #body так:

#body { 
    background-color:white; 
    margin-left:auto; 
    margin-right:auto; 
    width: auto; 
    padding: 10px; 
    padding-bottom: 0px; 
} 

Answer 2

Вы можете использовать Flexbox, ваш CSS может быть что-то вроде этого:

#body { 
    background-color:white; 
    display: flex; 
    flex-grow: 1; 
} 

#body-main-left { 
    background-color:rgba(100, 100, 100, 0.1); 
    width: 150px; 
} 

#body-main-right { 
    background-color: rgba(100, 100, 100, 0.1); 
    width: 150px; 
    order: 2; 
} 

#body-main-center { 
    flex-grow: 1; 
} 

#footer { 
    background-color: black; 
    color: red; 
} 

Проверить это demo