I have the following code that mimics my problem. I want to style the elements within the "Container" div using percentages. Therefore I have to set the "Container" div to height 100% (or other value) to make this work. The problem arises when I want the "Container" div to change height to reflect contents. In the case below I'd want the height to be 200% (in this case that would work as I know the contents of "Container" but I have a datagrid in the real world case with varying numbers of rows). If I set height to auto then I can't change the child elements using percentages. Is there any way around this or am I set with fixed height containers?
Thanks,
Rich.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<form style="height:100%">
<div id="Container" style="border:solid 5px;min-height:100%;height:100%">
<div style="height:100%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
</div>
</form>
</body>
</html>