15

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>​
Matt Fenwick
  • 48,199
  • 22
  • 128
  • 192
  • This may be of interest as well, even without Bootstrap in the picture: http://stackoverflow.com/questions/9143971/using-twitter-bootstrap-2-0-how-to-make-equal-column-heights – cdonner Dec 26 '13 at 16:46

4 Answers4

10

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

septemberbrain
  • 998
  • 9
  • 25
  • 1
    Thanks for the link. Any idea why `height: 100%` doesn't work? – Matt Fenwick Jun 28 '12 at 16:34
  • 3
    You are telling it to be 100% of its container which is #main. Since #main does not have a height it is 100% of itself. Set a height to #main and #sidebar and #content will be set to 100% of it. – septemberbrain Jun 28 '12 at 16:55
  • 3
    Okay, I see -- it works if the height of `#main` is in pixels, but not if the height is in %. – Matt Fenwick Jun 28 '12 at 17:07
  • @MattFenwick late, but for others: thats the same issue as with the `#content`-`#main`-relation. The height of the parent of `#main` must be set as well and so on... until `body` or `html`. If they have all set a value for `height` that is not `auto`, then it is working. – Martin Schneider Jun 26 '17 at 12:01
3

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.

Ashwin Singh
  • 7,197
  • 4
  • 36
  • 55
  • `div is a container. It will take up the height its contents take up.` -- can you be more specific? There's lots of `div`s in my code. – Matt Fenwick Jun 28 '12 at 16:33
  • I was talking about div as an element. Basically div is meant to contain things. So if you have nothing inside, its height will be zero unless you set it in pixels. – Ashwin Singh Jun 28 '12 at 16:35
  • Okay, that shouldn't affect my example because all of the `div`s except for `#main-footer` do have something inside. Any idea why `height: 100%` on `#sidebar` doesn't work? – Matt Fenwick Jun 28 '12 at 16:38
  • Well if it does has something inside, then the div will take up the height of the content. That's what happening with your every div. That's what happening with #main, #content and #sidebar and height:100% just means to take up the space the inner contents take. Its actually is working as per definition. You are understanding it wrong. – Ashwin Singh Jun 28 '12 at 16:41
  • 1
    Ah! I thought that `height: 100%` meant that the element would be 100% the size of its parent -- so it actually means to be 100% the size of its children? Wow! ... But if that were true, then changing `#sidebar`'s `height` should have an effect, and it doesn't. ??? – Matt Fenwick Jun 28 '12 at 16:51
  • It definitely will what did you set now? Can you show the fiddle? See here it does http://jsfiddle.net/8vh6M/15/ – Ashwin Singh Jun 28 '12 at 16:56
  • Yes, in pixels -- but I'm trying to stick with %'s. Why doesn't changing the height in % make any difference? – Matt Fenwick Jun 28 '12 at 17:06
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13179/discussion-between-ashwin-singh-and-matt-fenwick) – Ashwin Singh Jun 28 '12 at 17:07
3

2017 solution: For me it worked well with flexbox. I needed the page content to be stretched over the full window height if the content should be smaller than the window height.

      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;
        }
      }
FullStack Alex
  • 1,783
  • 19
  • 31
3

Removing heights from #sidebar and #content and adding display:flex to #main should do the trick.

i.e.

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

jamsandwich
  • 367
  • 5
  • 11