Question

所以，我实际上可能完全过度思考这个问题并且应该删除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;

    }

我只是在寻找一个简单的两列布局，列的颜色不同 - ＆gt;始终至少100％的高度，以便他们填写屏幕。我设置为min-height，因为如果内容溢出，我希望父'content'div的高度（以及随后的'container'div）增长并允许页面滚动。

现在虽然......在高度为％的父级中，似乎min-height％不起作用。更别说进一步涓滴了。

也许我只是接近这完全错误了？我不知道。

Answer 1

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

CSS：高度％父级，最小高度％子级（相对定位）

1 个答案: