div要素を垂直方向に塗りつぶすにはどうすればよいですか？

Question

私は#sidebarを#mainと垂直に（そして#contentの高さに一致するように）しようとしています。これはどうすればいいですか？

Here's my 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の高さを設定することなく、明示的にそれは少しトリッキーです。 Here is one solution。

Answer 2

divはコンテナです。そのコンテンツの高さを占有します。あなたが望むものを達成する唯一の方法は、高さをpxで使うことです。セマンティックマークアップについて気にしないなら（私はあなたにすべきです）、septemberbrainのリンクは良いトリックです。

Answer 3

2017ソリューション： フレックスボックスでうまくいきました。コンテンツをウィンドウの高さよりも小さくする必要がある場合は、ウィンドウの高さ全体に渡ってページのコンテンツを引き伸ばす必要がありました。 #mainから#sidebarと#contentおよび追加display:flexから

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

Answer 4

削除する高さは、トリックを行う必要があります。

これは絵でも、ブートストラップなしで、同様に関心のある

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