LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

table布局 height=100%无效分析

admin
2014年5月18日 23:54 本文热度 7511

在使用table表格进行页面布局时,经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果,但在最新的浏览器中经常遇到无效,根本原因再于浏览器使用用的工作模式的不同造成的;在Firefox与IE8标准模式下,HTML与Body标签默认是没有高度(即高度为0) ,而是根据其中的内容自适应,如果设置表格的style="height:100%",达不到全屏效果。

问题分析:



有关浏览器工作模式大致可分为三种:Standarded Mode, Almost Standarded Mode及Quirks Mode,其中Standarded Mode最为严格,即页面要求最规范,最符合W3C标准,又称为Strict Mode;Quirks Mode是指浏览器模拟早期浏览器版本,为了适应早期页面中不规范的标签等;Almost Standarded Mode是当前使用最广泛的工作模式,是一种由不规范到规范过渡(其实它与Standarded Mode区别并不大,仅在图片显示及少量脚本解析上存在差异)。以上三种模式是由页面最开始的<!DOCTYPE>(文档对象类型)定义的,浏览器在加载页面时,首先根据文档对象类型定义来判断当前页面是应该使用哪种工作模式来渲染页面以达到页面定义者的预期效果。


常见 HTML中<!DOCTYPE>(文档对象类型)有:


(1)<!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">(注意其中 Transitional 表示:Almost Standarded Mode )


(2)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">(表示:Standarded Mode )


(3) 未写<!DOCTYPE>声明,或<!DOCTYPE >声明书写有误,则工作在Quriks Mode


(4) <!DOCTYPE html>(Transitional 的简化:Almost Standarded Mode)


获取更多有关DOCTYPE信息请查看:W3C DOCTYPE Mozilla's DOCTYPE sniffing


回到问题:


一个对象高度是否可以使用百分比显示,取决于对象的父级对象,Table在body之中,因此它的父级是body,而浏览器在标准模式下,是没有给body一个高度属性的,因此当设置height:100%;时,不会产生任何效果(内容根据高度自适应),而当给body设置了100%之后(相对于html标签),它的子级对象Table的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。值得注意:Firefox中的HTML标签不是 100%高度,因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。


解决方案:(1)为<html>与<body>标签添加100%的高宽属性。 (2)可直接删除<!DOCTYPE>定义,这样浏览器会工作在Quriks Mode下,body与html默认有高宽度,但不推荐这种方式



<style type="text/css">

html,body{

width:100%;


height:100%;


}


<!--以下设置全屏-->


body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

</style>

该文章在 2014/5/18 23:54:26 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved