Hi all,
I'm trying to create a header-body-footer container based on an css table implementation. The code used:
@jsfiddle.net: http://jsfiddle.net/92y9L/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
<div class="outer">
<div class="tbl">
<div class="tr" style="background-color:Red;">
<p>test paragraph. This is used as placeholder<br />new line....</p>
</div>
<div class="tr stretch-y" style="background-color:Gray;">
<div class="td stretch-y" style="background-color:Blue;">
<div class="body-outer" style="background-color:Green;">
<div class="body-inner">
<p style=" white-space:nowrap;">test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
<p>test paragraph. This is used as placeholder<br />new line....</p>
<p>test paragraph. This is used as placeholder</p>
</div>
</div>
</div>
</div>
<div class="tr" style="background-color:Red;">
<p>test paragraph. This is used as placeholder<br />new line.</p>
</div>
</div>
</div>
</body>
CSS
.outer{
width:250px;
height:350px;
border:1px dotted black;
margin:-1px;
}
.tbl
{
display:table;
width:100%;
height:100%;
}
.tr
{
display:table-row;
}
.td
{
display:table-cell;
margin:0 auto;
text-align:center;
}
.tr .body-outer
{
height:100%;
width:100%;
}
.body-outer
{
}
.body-inner
{
right:0;
bottom:0;
overflow-y:auto;
overflow-x:auto;
}
.stretch-x
{
width:100%;
}
.stretch-y
{
height:100%;
}
The concept of this approach is to use an inner css table with three css table rows under the boundaries of an outer container. The upper css row is used to host the header and the lower one to host the footer. Both of them are auto sized based on their content.
The middle row, which is used as the body container, is stretched by setting the height equals to 100%. Concerning the inner content of the "body" css row has been used the outer-relative/inner-absolute layout technique in order to force content to be fitted inside the boundaries of the "body" css row and to allow overflowing. The intermediate css table cell is required by IE in order to work the requirement of stretching.
This design works perfectly with FF+Chrome+Opera+Safari but IE refuses to calculate the height of the "body" content relatively to its ancestor, the css table row, and it persists to correlate it with the height of the outer div. This is exactly the issue that I'm facing. Any ideas?