xhtml的布局，满屏，高度自适应

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量58 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/yaksea/archive/2008/08/01/1258301.html
版权

两种方案，推荐使用第一种

一、

<!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>

转载于:https://www.cnblogs.com/yaksea/archive/2008/08/01/1258301.html

weixin_30699955
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端设计之CSS布局：上中下三栏自适应高度CSS布局
西召
08-14 4538
网页代码： CSS布局：上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !important; padding:90px 0 32px 0; width:100%; height:100%; overflow:hidden; } .header { background
左右两列自适应中间列内容即随中间内容高度自适应的布局
12-13
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> <meta ...
自适应各种终端各分辨率的CSS+XHTML
08-31
可以适应各种终端设备各种分辨率,如手机，平板，PC，自动会调整到最佳显示排版效果。
XHTML+CSS页面布局概括
weixin_33924312的博客
03-21 126
XHTML+CSS的布局的由来 　　Table为了储存数据而Div是为了架构页面结构 　　W3C（World Wide Web Consortium：万维网联盟）W3C标准是一系列标准的集合：结构标准、表现标准、动作标准，与结构标准对应的代表语言是XHTML，与表现标准对应的语言是CSS，与动作标准对应的语言是JavaScript。 　　当我们将一个成品的网页制作成一个静态页面的时候，要符合...
XHTML学习笔记(3)之布局实例
痛并快乐着
12-27 989
/*body样式*/body { MARGIN: 0px;PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;FONT-FAMILY: Lucida Grande,Lucida Sans Unicode,宋体,新宋体,arial,verdana,sans-seri
XHTML学习笔记(3)之自适应高度
痛并快乐着
12-27 893
#header{ MARGIN: 0px; BORDER: 0px;BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING:
html用于构建网页结构,css是利用什么XHTML标记构建网页布局？
weixin_39772566的博客
06-21 1050
css是利用什么XHTML标记构建网页布局？css是利用的XHTML标记构建网页布局。XHTML是相对HTML来说的，比html更严格，指的是网页结构规范等；而css用来美化各部分结构。html利用div标签实现整体的网页布局，利用css实现网页的显示效果。在网页前端布局中首先利用div对网页进行整体的结构布局，再利用css对内容的控制，利用javascript实现表现的分离！扩展知识：DIV标签...
css经典布局——头尾固定高度中间高度自适应布局
qfgg3的专栏
06-30 3655
下面说下要求： 1 头部固定高度，宽度100%自适应父容器； 2 底部固定高度，宽度100%自适应父容器； 3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 4 整个内容填满浏览器可视区域，并且不超出此区域！ 先看下效果图：   相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！ 是的，本
两行布局一行固定高度一行自适应满屏
lqc851011的专栏
07-13 3424
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=ut
Web布局中的几种宽高自适应
鼍城懒人的专栏
12-27 1099
前言 打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一目了然。但是用户所用的浏览器、显示器、分辨率大多都是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一部手机上可能一排只显示1个商品。至少
纯CSS无hacks的跨游览器自适应高度多列布局 推荐
09-25
【纯CSS无hacks的跨浏览器自适应高度多列布局】是一种实现网页设计中等高多列的方法，不依赖任何JavaScript、图片或者CSS hack。该技术由Matthew James Taylor提出，并在此基础上进行了简化，便于初学者理解。核心...
JS实现DIV高度自适应窗口示例
12-09
本文实例讲述了JS实现DIV高度自适应窗口。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
让iframe自适应高度（支持XHTML，支持FF）
10-30
让iframe自适应高度（支持XHTML，支持FF）
让iframe自适应高度（支持xhtml）IE firefox兼容
10-30
让iframe自适应高度（支持xhtml）IE firefox兼容 让iframe自适应高度是指在HTML文档中，使iframe的高度能够根据其内容自动调整，以适应不同浏览器和屏幕分辨率的需求。在本文中，我们将讨论如何使用JavaScript和...
div+css全屏自适应+水平垂直居中 【同事武功传授】
weixin_30662539的博客
12-14 120
代码作者：同事宁儿； 浏览吸收者：本人天少侠 代码如下： div+css全屏自适应[整体垂直居中] /*兼容ie7-ie9、火狐、谷歌浏览器，div+css全屏自适应[整体垂直居中]*/ /*author:sn，time:2012-12-7*/ /*visitor:htt time:2012.12.7*/ /*html样例*/ <!DOCTYPE ht...
web前端基础面试85题（一）
柯晓楠
07-18 933
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
两天掌握：XHTML+CSS网页布局自学教程
"这是一份自学网页布局的材料，...这份自学材料旨在帮助初学者在短时间内掌握网页布局的基本技能，通过理论与实践相结合的方式，深入理解`xHTML+CSS`布局的核心原理，为构建响应式、符合Web标准的网页打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值