forcing div to take all available height between two divs

[JesenkoS]

I have absolutely positioned, fixed size div (mainDiv) on a page, inside which a header(headerDiv) , a div containing data (dataDiv) and a footer(footerDiv) should be displayed. Scrollbars should be shown if there is too much data to fit inside containing div.

The problem is that headerDiv has variable height, so dataDiv can't have fixed height defined, but should take all available height that remains in mainDiv

<style>
 
#mainDiv{
position:absolute;
left:100px;
top:100px;
width:500px;
height:500px;
}
 
#headerDiv{
width:100%;
}
 
#dataDiv{
width:100%;
overflow:auto;
height:???
}
 
#footerDiv{
width:100%;
height:20px;
}
 
</style>
 
<div id="mainDiv">
<div id="headerDiv">
Header with height based on content
</div>
<div id="dataDiv">
Variable data, scrollable if container height is exceeded
</div>
<div id="footerDiv">
Fixed size footer
</div>
</div>

I have been experimenting with different css properties and checked numerous forums but could not find appropriate solution. Does anyone knows a css solution to this seemingly simple problem or is Javascript the only option?

thanx

Simon

[epots9]

Hi JesenkoS welcome to TSDN,

try this:

#headerDiv{
width:100%;
height:20%
}
 
#dataDiv{
width:100%;
overflow:auto;
height:60%
}
 
#footerDiv{
width:100%;
height:20%;
}
 

play around with the percentages to get it looking the way u want.
good luck