CSS: высота % родителя с минимальной высотой % дочерних элементов (относительно позиционированных)

Итак, я мог бы на самом деле слишком много думать об этом и должен отказаться от min-height, но в настоящее время у меня есть следующий HTML:

<div id='container'>
      <div id='nav'>
      </div>
      <div id='content'>
          <div id='main-content'>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
          </div>
          <div id='side-bar'>
                 <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
                <div class='stuff'>
                </div>
          </div>
      </div>
 </div>

CSS:

#container {
     width:100%;
     height:100%;
     position:relative;
 }

#nav {
     width:1000px;
     height:40px;
     position:fixed;
         top:0;
}

  #content{
     width:100%;
     min-height: -webkit-calc(100% - 40px);
     min-height: -moz-calc(100% - 40px);
     min-height: calc(100% - 40px);
     margin-top:40px;
 }

#main-content{
     background:#e1e1e1;
     width:600px;
     height:100%;
     position:relative;

}

 #side-bar{
         background:#d1d1d1;
         width:400px;
         height:100%;
         position:absolute;
             right:0;

    }

Я просто ищу простую компоновку из двух столбцов с разным цветом столбцов -> всегда не менее 100% высоты, чтобы они заполняли экран. Я установил минимальную высоту, поскольку, если содержимое внутри переполняется, я бы хотел, чтобы высота родительского div «content» (и впоследствии div «container») росла и позволяла прокручивать страницу.

Однако сейчас... кажется, что min-height % не работает, когда внутри родителя с высотой %. Не говоря уже о том, чтобы просочиться дальше.

Может быть, я просто подхожу к этому совершенно неправильно? Я не знаю.