如何使一个div垂直填充其父元素？

Question

我想让#sidebar与#main的高度相等（并匹配#content的高度）。我该怎么做？

这是我的jsFiddle链接: http://jsfiddle.net/8vh6M/ 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>​

- Matt Fenwick

---

这也可能很有趣，即使没有Bootstrap的参与： https://dev59.com/8mox5IYBdhLWcg3wi0vF - cdonner

Answer 1

如果不显式设置div的高度，那么就有点棘手了。 这里是一个解决方案。

- septemberbrain

---

谢谢提供链接。不知道为什么 height: 100% 不起作用？ - Matt Fenwick

你在告诉它要占据容器 #main 的 100%空间。因为 #main 没有设置高度，所以它占据了自身的 100%。给 #main、#sidebar 和 #content 设置一个高度，它们就会占据 #main 的 100% 空间。 - septemberbrain

好的，我明白了——如果#main的高度用像素表示，那么它是有效的，但如果用百分比表示，则无效。 - Matt Fenwick

@MattFenwick 晚了一步，但对于其他人来说：这与 #content-#main 关系的问题相同。#main 的父元素高度也必须设置，以此类推... 直到 body 或 html。如果它们都设置了一个非 auto 的 height 值，则可以正常工作。 - Martin Schneider

Answer 2

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;
        }
      }

- FullStack Alex

Answer 3

将 #sidebar 和 #content 的高度去掉，并在 #main 中添加 display:flex 即可实现。

例如：

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

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

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

See JSFiddle.

- jamsandwich

Answer 4

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

- Ashwin Singh

---

div是一个容器。它将占据其内容所占据的高度。--你能更具体一些吗？我的代码中有很多div。 - Matt Fenwick

我在谈论作为元素的div。基本上，div是用来包含其他东西的。因此，如果你里面没有任何内容，它的高度将为零，除非你以像素为单位设置它的高度。 - Ashwin Singh

好的，那不应该影响我的示例，因为除了 #main-footer 之外的所有 div 都有内容。你知道为什么在 #sidebar 上使用 height: 100% 不起作用吗？ - Matt Fenwick

啊！我以为 height: 100% 的意思是元素的大小将是其父元素的100％ - 所以它实际上意味着要成为其子元素的100％的大小？哇！...但如果那是真的，那么更改 #sidebar 的 height 应该会产生影响，但它并没有。??? - Matt Fenwick

让我们在聊天中继续这个讨论。 - Ashwin Singh