Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

layout

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>​
like image 855
Matt Fenwick Avatar asked Jun 28 '12 16:06

Matt Fenwick


People also ask

How do I make DIVS always fit in my parent 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.


2 Answers

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

like image 159
septemberbrain Avatar answered Sep 19 '22 05:09

septemberbrain


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.

like image 41
Ashwin Singh Avatar answered Sep 21 '22 05:09

Ashwin Singh