Maximizing a child div's height within a parent div

[AaronV]

I have a simple div setup:\[code\]<div id="container"> <div id="title"><h4>Title</h4></div> <div id="content"></div></div>\[/code\]The \[code\]#container\[/code\] element is set to a fixed height. I would like to have \[code\]#content\[/code\] us all the available height, but I haven't found a clean cross-browser way to do this. Here is the CSS:\[code\]div { width: 100%;}#container { height: 400px;}#content { height: 100%;}\[/code\]But this results in \[code\]#content\[/code\] having the same height as \[code\]#container\[/code\] and overflows its parent.A live example can be seen at http://jsbin.com/amekah/2/edit.I should note that I'm writing a JavaScript library that appends the \[code\]#content\[/code\] div to an input div element (\[code\]#container\[/code\] in this example) so I don't want to fiddle too much with the layout of either the parent element or any child elements. I don't mind using JavaScript to calculate the available height dynamically.