zoukankan      html  css  js  c++  java
  • 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=" 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; 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; 100%; height: 100px; position: absolute;">
            header
        </div>
        <table style="height: 100%; 100%; padding-top: 100px;" cellpadding="0" cellspacing="0">
            <tr>
                <td style=" 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; 70px;">
                    right
                </td>
            </tr>
        </table>
        <div style="margin-top: -60px; height: 60px; background: blue; 100%">
            bottom</div>
    </body>
    </html>

  • 相关阅读:
    Python+VSCode IDE 快速开发配置 #VSCode上配置Jupyter Notebook
    GUI Design Studio 简单通讯本设计原型 1
    GUI Design Studio 简单通讯本设计原型 2
    安装Lua For Windows
    Lua – Hello World!
    GUI Design Studio 功能面板介绍
    中文字符级转换
    Base64传输字节码转换
    这怎么是英文的?
    error? in CLR via c#
  • 原文地址:https://www.cnblogs.com/yaksea/p/1258301.html
Copyright © 2011-2022 走看看