Height of child div overflows parent container

Question

We need to set the vertical scrollbar for the text overflow div. The problem is that we set the height to 100% and overflow in auto, it expands beyond its parent container due to the fact that another child div precedes. 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% makes it have a height of 100 pixels, which makes it overflow below the bottom of the container by 2em . We tried not to use height at all for the app-body , but this leads to its overflow without displaying the scroll bar.

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

Answer 1

Try this by setting the positioning of the application body to absolute, and then fixing 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 browsers FF3.6, IE8, Webkit.

Answer 2

You can install the container. overtain: hidden as follows:

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

Hope this helps