css - 如何让 div 垂直填充其父元素？

Question

我正在尝试垂直#sidebar填充#main（并匹配#content的高度）。我该怎么做呢？

这是我的 jsFiddle。

CSS：

#main {
   border: solid green 2px;
}

#sidebar {
    background-color: red;
    width: 20%;
    overflow: auto;
    float: left;
    height: 100%;
}

#content {
    background-color: orange;
    width: 80%;
    overflow: auto;
    float: left;
    height: 100%;
}

#main-footer {
    clear: both;
}​

和html：

<div id="main">

 <div id="sidebar">
     <ul>
         <li>abc</li>
         <li>def</li>
     </ul>
 </div>

 <div id="content">
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
 </div>

 <div id="main-footer">
 </div>

</div>​

Answer 1

如果不明确设置 div 高度，这有点棘手。 这是一种解决方案。

Answer 2

div 是一个容器。它将占据其内容占据的高度。实现您想要的唯一方法是使用 px 中的高度。如果您不关心语义标记（我建议您应该），那么 septemberbrain 的链接是一个好技巧。

Answer 3

删除和添加高度#sidebar应该#content可以display:flex解决#main问题。

IE

#main {
  border: solid green 2px;
  display: flex;
}

#sidebar {
  background-color: red;
  width: 20%;
  float: left;
}

#content {
  background-color: orange;
  width: 80%;
  float: left;
}

请参阅 JSFiddle。

Answer 4

2017 年解决方案：对我来说，它与 flexbox 配合得很好。如果内容应该小于窗口高度，我需要将页面内容拉伸到整个窗口高度。

      html,
      body{
        min-height: 100%;
        display: box;
        display: flexbox;
        display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
        display: -ms-flexbox;  /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10*/
        display: -moz-box;
        display: flex;
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        -ms-flexbox-direction:column;
        -ms-flex-direction: column;
        flex-direction:column;
      }
      body{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
        -ms-flex: 1 1;
        flex: 1 1;
      }
      #page{
        -webkit-box-flex: 100;
        -webkit-flex: 100 100;
        -ms-flex: 100 100;
        flex: 100 100;
      }
      footer{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
        -ms-flex: 1 1;
        flex: 1 1;

        -ms-flex-preferred-size: 300px;
        -webkit-flex-basis: 300px;
        flex-basis: 300px;
      }
      @media only screen  and (max-width:500px) {
        footer{
           -ms-flex-preferred-size: 400px;
           -webkit-flex-basis: 400px;
           flex-basis: 400px;
        }
      }