css - 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

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