css - div で親要素を垂直に埋めるにはどうすればよいですか?

Question

私は垂直に塗りつぶそうとしています（そしての高さに一致#sidebarします）。どうすればいいですか？#main#content

これが私の 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 の高さを明示的に設定しないと、少し注意が必要です。 ここに 1 つの解決策があります。

Answer 2

div はコンテナです。コンテンツが占める高さを占めます。あなたが望むものを達成する唯一の方法は、px で高さを使用することです。セマンティック マークアップを気にしない場合 (そうすることをお勧めします)、septemberbrain のリンクは良いトリックです。