CODEWITHSUNDEEP
css
Rick Jolly
Rick Jolly

Reputation: 2999

How to make a scrollable element fill 100% of the remaining height of a parent element?

I have a container div that is a fixed height. It has some content and another child element. I would like the child element to scroll when it has filled the remaining height.

I came up with a solution that seems to work, but I'm not sure it is correct.

<style type="text/css">
  #container {height: 100px; width: 100px; border: solid; }
  #titlebar { background: gray;}
  #app-body {height: 100px; overflow: auto; background: lightblue;}    
</style>

Working fiddle. Edit: updated fiddle to remove style tags.

Is there a better way? I don't like restating the container height in the child div.

Upvotes: 3

Views: 4327

Answers (3)

fnostro
fnostro

Reputation: 4591

Here is an experimental CSS possibility note - i made the height and width of the container wider to see it more clearly.

 #container {
      height: 200px;
      width: 200px;
      border: solid;
    overflow: auto;
  }
  #titlebar {
      background: gray;
  }
  #body {
      height:calc(100% - 4em); /* definitely non standard - the 4 em is an approximate size of the titlebar*/
      overflow: auto;
      background: lightblue;
  }

/*Old answer - disregard */

/*#container {
    height: 100px;
    width: 100px;
    border: solid;
    overflow:auto;   /* overflow belongs here *//*
}
#titlebar {
    background: gray;
}
#app-body {

    background: lightblue;
}*/

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

Display:table could be usefull:
Demo http://jsfiddle.net/GCyrillus/Vedkw/1
Firefox dislike it, child from display:table-row, behaves like table-cell, logic

html, body {height:100%;width:100%;margin:0;}
#container {display:table;height:100%;width:100%;}
#titlebar, #body {display:table-row;height:100%;}
/* overwrite height of titlebar */
#titlebar{height:auto;}

EDIT: digg a little please, THIS is a basic layout and you can use it.b
Inner content of #body can scroll .

Upvotes: 1

Sourabh
Sourabh

Reputation: 8482

Are you looking for this: Fiddle

I think this is only possible if you set the height of #body. Else it just flows, overflow: scroll on it or overflow: hidden on #container has no effect. And to set its height, you have to know/set the height of #titlebar.

I think jQuery can solve this height problem easily.

CSS 

#container {
    height: 250px;
    border: solid;
    /*overflow: hidden*/ /* <-- not really needed if height of sub-elements*/
                         /* is <= child of container */
}
#titlebar {
    height: 60px;
    background: gray;
}
#body {
    height: 190px;
    overflow-y: scroll;
}

EDIT

I think making a block element the height remaining is not possible by just CSS as elements take as much height they need and not as much height available, unless specified.

If you can use script, see this fiddle

jQuery

var $body = $('div#body');
var h = $body.parent('div').height()
        - $body.siblings('div#titlebar').height();
$body.height(h);

CSS

#container {
    height: 250px;
    border: solid;
    overflow: hidden
}
#titlebar {
    background: gray;
}
#body {
    overflow-y: scroll;
}

Upvotes: 0

Related Questions