table height 100%问题

背景：做项目时候，为了省事用table布局，table高度设置成100%，不起作用

原因：

有关浏览器工作模式大致可分为三种：Standarded Mode， Almost Standarded Mode及Quirks Mode。。。。。。

一个对象高度是否可以使用百分比显示，取决于对象的父级对象，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默认有高宽度，但不推荐这种方式

html,body{

width:100%;

height:100%;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

</style>

转载于:https://www.cnblogs.com/taob/p/6413780.html

table height 100%问题相关推荐

div高度、宽度100% div width、height 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
div高度、宽度100%|div width、height 100% - div100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
设置html的table高度100%
去掉页面头的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html body div height: 100%;
最近做了测试 html{ height: 100%;//全部内容高度,包括滚动出现的内容 background-color:#000; } body{ height: 100%;//只一页屏幕,用作滚 ...
CSS 如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
让height: 100%生效
html: <body><div class="box"></div> </body> css: .box{position: fi ...
[css] body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...
[css] css的height:100%和height:inherit之间有什么区别呢？
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子不过inh ...
CSS中height:100%和height:inherit的异同
1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6+ √ height:inherit IE8+ √ 1.2 大多数情况作用是一样的 ...

table height 100%问题

table height 100%问题相关推荐

最新文章

热门文章