Height of child div overflows parent container

Question

We need to instate a vertical scrollbar for overflow text of a div. The problem is when we set the height to 100% and overflow to auto, it expands beyond its parent container because of another sibling div preceding it. Here is an example:

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

...

<div class="container">
    <div class="titlebar"></div>
    <div class="app-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.</div>
</div>

app-body set to 100% causes it to have a height of 100px which makes it overflow beyond the bottom of container by 2em. We tried not using a height at all for app-body but that causes it to overflow without the scrollbar displayed.

I know we could set the height to a smaller percentage or a fixed number of pixels but that will cause problems for us if the font size changes. If a height of 100% - 2em was valid then that would be effectively what we are trying to define.

Answer 1

Try this, setting the app-body positioning to absolute and then fixed the top to 3em and the rest to 0:

<style type="text/css">
  .container {height: 100px; width: 100px; border: solid; 
      position: relative;}
  .titlebar {height: 2em; background: gray; 
      position: relative;}
  .app-body {height: auto; overflow: auto; background: lightblue; 
      position: absolute; top: 2em; left: 0; right: 0; bottom: 0;}    
</style>

PS: Above tested on FF3.6, IE8, Webkit browsers.

Answer 2

You can set the .container to overflow:hidden like so:

<style type="text/css">
.container {height: 100px; width: 100px; border: solid;overflow: hidden;} 
</style>

Hope this helps