为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...

在使用HTML代码创建网页，如果声明了，并且在代码中有div设置了高度为100%，可能会出现显示不正常的情况。比如下面这个代码：

Title

* {margin:0px;padding:0px;}

div {

background-color:red;

width:200px;

height:100%;

}

显示的结果是:啥都木有! Why?

原因在于html5标准要求高度或宽度设置成百分比时，参照的是父标签。这句话理解了问题也就好办了。

标签的父标签是，我们会天真的认为标签的高度不需要定义，恰恰是因为标签的高度没有定义所以才导致

显示不正常。在css里面添加一个参数 body {height:100%;}，预览，结果是:还是木有!

为什么呢？

标签的高度虽然设置成100%了，但标签他爹是标签，这个标签也是需要定义高度的。所以最终要添加的参数是html,body {height:100%;}

请注意了，html和body之间是逗号，不是空格。说明这是一个多标签选择器，不是派生选择器。

为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...相关推荐

html列自动变高,HTML_CSS三行三列DIV高度自适应的设置，用脚本控制三行三列div高度自 - phpStudy...
CSS三行三列DIV高度自适应的设置用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应 ...
IE6 下div高度显示的问题
IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高.所以即使你用 height: 6px ...
ios5 中文键盘高度变高覆盖现有ui问题的解决方案（获取键盘高度的方法）
背景: ios5之前,iphone上的键盘的高度是固定为216.0px高的,中文汉字的选择框是悬浮的,所以不少应用都将此高度来标注键盘的高度(包括米聊也是这么做的). 可是在ios5中,键盘布局变了, ...
（第21列）C语言典型题：一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？
先看结果: 直接代码解析: #include<stdio.h>int main() {float i=1,h=100,sum=0,num;while(i<11){sum+=(h/2+ ...
IE6下div宽高设置
IE6下宽高设置.IE下div 中没有内容时,设置宽高不起作用,必须设置div背景色,并使用滤镜.才能使Div填充目标区域.多用于,其他容器元素使用背景图片,但是背景图片的部分需要其他的事件支持.如跳 ...
三种有效解决DIV高度自适应的方法
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). DIV高度自适应的三种有效解决方法 DIV+CSS ...
vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
dreamweaver中灵活的调整表格的宽高
在使用Dreamweaver制作主页的时候往往需要改变表格的高度.然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子. 出现这种情况的原因在于我们已经为表格提供了一个固 ...
【linux性能优化】系统Swap变高原因分析
一.内存处理 1.1 内存资源紧张的应对当发生了内存泄漏或者运行大内存的应用程序,导致系统的内存资源紧张时,系统又会如何应对呢? 这其实会导致两种可能结果,内存回收和OOM杀死进程 OOM杀死进程 ...

为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...

为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...相关推荐

最新文章

热门文章