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

How do I make a div fill its parent element vertically?

提问by Matt Fenwick

I'm trying to get #sidebarto fill #mainvertically (and match #content's height). How do I do this?

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

Here's my jsFiddle.

这是我的 jsFiddle。

CSS:

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

And html:

和 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>?

回答by septemberbrain

Without setting the div height explicitly it is a little tricky. Here is one solution.

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

回答by Ashwin Singh

div is a container. It will take up the height its contents take up. The only way to acheive what you want is to use height in px. If you do not care about semantic markup(I recommend you should) then septemberbrain's link is a good trick.

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

回答by Tech Nomad

2017 solution: For me it worked well with flexbox. I needed the page content to be stretched over the full window height if the content should be smaller than the window height.

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

回答by jamsandwich

Removing heights from #sidebarand #contentand adding display:flexto #mainshould do the trick.

从拆卸的高度#sidebar和#content并加入display:flex到#main应该做的伎俩。

i.e.

IE

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

请参阅 JSFiddle。