Header-body-footer control

One of the most frustrating thing for me is (in strict mode) to create a 'header-body-footer' control, with stretching body. Well it should be easy, but in fact, by the css 2.1 content-box model, it is just imposible to create such a control when using borders and/or margins, padding (and without using javascript).
Luckily the border-box model is back in css 3 and so I think its good to have a testcase for this contol (keeping in mind that all newest versions of the browsers are supporting css box-sizing).

So I think the following or similar test should be added (since IE7 (and IE8)) do render it the wrong way...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="width:100%;height:100%;padding:0px;margin:0px;">
<body style="width:100%;height:100%;padding:0px;margin:0px;">
<table cellspacing="0px" cellpadding="0px" style="width:100%;height:100%;">
    <tr>
	    <td style="background-color:green;">
            Header of unspecified height
		</td>
	</tr>
	<tr style="height:100%;background-color:blue;">
		<td>                    Stretching body filling up table
		</td>
	</tr>
	<tr>
		<td style="background-color:red;">
			Footer of unspecified height
		</td>
	</tr>
</table>
</body>
</html>

Received on Sunday, 9 March 2008 19:16:12 UTC