xhtml的布局,满屏,高度自适应
两种方案,推荐使用第一种
一、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body
{
height: 100%;
}
body
{
margin: 0px;
}
.tbBody
{
height:expression(document.body.clientHeight - 180 + "px");
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
<thead>
<tr>
<td colspan="4" style="background: red; height: 100px;">
</td>
</tr>
</thead>
<tbody class="tbBody">
<tr>
<td style="background: yellow; width: 200px;">
</td>
<td style="background: blue;">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="background: green; height: 80px;">
</td>
</tr>
</tfoot>
</table>
</body>
</html>
二、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body
{
height:100%;
}
body
{
margin:0px;
}
</style>
</head>
<body>
<div style="background: red; width: 100%; height: 100px; position: absolute;">
header
</div>
<table style="height: 100%; width: 100%; padding-top: 100px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 160px; background: Green; vertical-align: top;">
left
</td>
<td style="background-color: Yellow; vertical-align: top;">
center</td>
<td style="background-color: Orange; vertical-align: top; width: 70px;">
right
</td>
</tr>
</table>
<div style="margin-top: -60px; height: 60px; background: blue; width: 100%">
bottom</div>
</body>
</html>