问题如何使div垂直填充其父元素？

我想要 #sidebar 填写 #main 垂直（和匹配 #content的高度）。我该怎么做呢？

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>

4335

2018-06-28 16:13

起源

即使没有图片中的Bootstrap，这也可能是有趣的： stackoverflow.com/questions/9143971/... - cdonner

答案:

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

2018-06-28 16:17

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

你告诉它100％的容器是#main。由于#main没有高度，因此它本身就是100％。将高度设置为#main和#sidebar，＃content将设置为100％。 - septemberbrain

好的，我明白了 - 如果它的高度可行 #main 是以像素为单位，但如果高度以％为单位则不是。 - Matt Fenwick

@MattFenwick迟到了，但是对于其他人来说：那就是与之相同的问题 #content - #main-关系。父母的高度 #main 必须设置等等......直到 body 要么 html。如果他们都设置了值 height 那不是 auto，然后它正在工作。 - MA-Maddin

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

2018-06-28 16:23

div is a container. It will take up the height its contents take up. - 你可以说得更详细点吗？有很多 div在我的代码中。 - Matt Fenwick

我在谈论div作为一个元素。基本上div意味着包含东西。因此，如果您内部没有任何内容，除非您以像素为单位设置，否则其高度将为零。 - Ashwin Singh

好的，这不应该影响我的例子，因为所有的 div除了 #main-footer 里面有东西。知道为什么 height: 100% 上 #sidebar 不起作用？ - Matt Fenwick

好吧，如果它确实有内在的东西，那么div将占用内容的高度。这就是你的每一个div发生的事情。这就是#main，＃content和#sidebar以及高度所发生的事情：100％只意味着占用内部内容占用的空间。它实际上按照定义工作。你理解错了。 - Ashwin Singh

啊!我以为 height: 100% 意味着该元素的大小将是其父级的100％ - 所以它实际上意味着它的子级大小是100％？哇！ ......但如果这是真的，那就改变了 #sidebar的 height 应该有效果，但事实并非如此。 ??? - Matt Fenwick

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

2018-06-11 18:41

从高处移除高度 #sidebar 和 #content 并添加 display:flex 至 #main 应该做的伎俩。

即

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

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

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

见JSFiddle。

2017-08-11 02:57

问题 如何使div垂直填充其父元素？

答案:

热门问题

问题如何使div垂直填充其父元素？