How do I make a div fill its parent element vertically?
css, html, layout
Solution
Without setting the div height explicitly it is a little tricky. Here is one solution.
Problem
I'm trying to get `#sidebar` to fill `#main` vertically (and match `#content`'s height). How do I do this? 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; } ``` And 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> ```