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>
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child.
Without setting the div height explicitly it is a little tricky. Here is one solution.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With