div width和height 100%设定

http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html

正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！

其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？

div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！

你设div的高度为100%,那么它是和什么地方相对为100%?

前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。可惜的是浏览器一般默认解释为内容的高度，而不是100%。但是只要为html和body设置高度为100%就可以了：html,body{height:100%;}，这样之后div会按比例来继承上一级的高度了，仅仅设置的DIV元素的height属性貌似没有什么效果。

同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。

那么，如下的样式可以设置Div撑满整个页面：

有一点需要注意的是，Html级元素默认宽度是100%，即整行；但是高度并不是100%，而仅仅是一行而已。

所以要想实现撑满整个页面，必须显式地设置高度为100%！

div width和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%是从 ...
CSS: 解决100% 高度失效 height 100% is not working when scrolling down page
原代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
关于html,body{height:100%}的理解
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数就是相当于包含块的高度,如 ...
width和height的默认值auto与%详解(附案例)。
结论点击这里有一篇关于width与height文章 width的%:定义基于包含块(父元素)宽度的百分比宽度,会突破父级的限制 width的auto:尽量被父级包裹 height的%:基于包含它的块 ...
CSS高度自适应 height:100%;
在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果为什么呢? 之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE ht ...
css的神奇操作之 height 100% position: absolute；自适应全屏盒子
下面这段代码你猜猜div有多大 <body> <div>Overlay example text</div> </body> <style> ...
width 、 height 与 box-sizing : border-box ,content-box 的关系
默认 width .height的 content-box 的宽高. box-sizing 经常用来设置 width.height指定的区域 box-sizing 经常用做一些自适应的布局. 语法: ...
CSS | width、height中auto与100%与固定值有什么不同
由于多次在设置width及height处出错导致不显示,总结了一篇固定值与auto.100%的差别,举例对比部分有基础的同学可以略过直接看总结. 总结: (1)width.height使用固定值是一定 ...

div width和height 100%设定

div width和height 100%设定相关推荐

最新文章

热门文章