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

我试图让#sidebar垂直填充#main（并匹配#content的高度）。我该怎么做呢？如何使div垂直填充其父元素？

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>

来源

2012-06-28 Matt Fenwick

这可能是利益为好，即使没有引导的画面： http://stackoverflow.com/questions/9143971/using-twitter-bootstrap- 2-0-how-to-make-equal-column-heights – cdonner

没有设置DIV高度明确这是一个有点棘手。 Here is one solution。

来源

2012-06-28 16:17:26 septemberbrain

感谢您的联系。任何想法为什么'身高：100％'不起作用？ –

你正在告诉它是#main的容器的100％。由于#main没有高度，所以它本身就是100％。将高度设置为#main和#sidebar，并将#content设置为100％。 – septemberbrain

好的，我看到了 - 如果'＃main'的高度是以像素为单位的，但是如果高度以％为单位则不起作用。 –

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

来源

2012-06-28 16:23:47

'div是一个容器。它将占据其内容占用的高度。“ - 你能更具体吗？我的代码中有很多div。 –

我在谈论div作为一个元素。基本上div是为了包含东西。因此，如果内部没有任何内容，除非将其设置为像素，否则其高度将为零。 –

好的，这不应该影响我的例子，因为'＃main-footer'除外的所有'div'确实有内容。任何想法为什么'＃sidebar'上的'height：100％'不起作用？ –

2017解决方案：对我来说，它适用于flexbox。如果内容应小于窗口高度，我需要将页面内容拉伸到整个窗口高度。从#sidebar和#content并添加display:flex到#main

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

来源

2017-06-11 18:41:17

删除高度应该做的伎俩。

即

#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.

来源

2017-08-11 02:57:57 jamsandwich

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

回答

相关问题