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;">
                    &nbsp;
                </td>
            </tr>
        </thead>
        <tbody class="tbBody">
            <tr>
                <td style="background: yellow; width: 200px;">
                    &nbsp;
                </td>
                <td style="background: blue;">
                    &nbsp;
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4" style="background: green; height: 80px;">
                    &nbsp;
                </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>

posted on 2008-08-01 16:28  yaksea  阅读(771)  评论(0编辑  收藏  举报