CSS: height % parent with min height % children (相对定位)

Question

所以，实际上我可能完全想多了，应该放弃最小高度，但我目前有以下 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(以及随后的“容器”div)的高度增长并允许页面滚动。

但是现在……当父级的高度为 % 时，min-height % 似乎不起作用。更不用说进一步下降了。

也许我只是完全错误地处理了这个问题？我不知道。

Answer 1

在声明子元素的%高度之前，必须先声明父元素的高度。