div高度、宽度100% div width、height 100%
2012-07-19 14:18
281 查看
正像你所知道的那样,设置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%撑满屏.以前用table来布局的时候会用到table高度100%然后再在这个table里插一个table垂直居中.这样的页面可以让它在不同分辨率下都在显示器中间.用div则比较麻烦了你设置div的高度为100%在浏览器里仍然看它扁的可怜.
呵呵~
应该怎么解决呢?
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
同时,让人高兴的是,这样设置的css样式不存在浏览器兼容问题,在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
下面以实例说明div100%的问题:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DivHeight100%_Test</title>
<styletype="text/css">
<!--
html,body{
margin:0px;
height:100%;
}
#deman{
height:100%;
background-color:#CCF;
}
.cc{
background-color:#9C9;
height:auto;
}
-->
</style>
</head>
<body>
<divid="deman">
<divclass="cc">DivHeight100%_Test</div>
</div>
</body>
</html>
其实,要弄懂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%撑满屏.以前用table来布局的时候会用到table高度100%然后再在这个table里插一个table垂直居中.这样的页面可以让它在不同分辨率下都在显示器中间.用div则比较麻烦了你设置div的高度为100%在浏览器里仍然看它扁的可怜.
呵呵~
应该怎么解决呢?
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度,而不是100%只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
同时,让人高兴的是,这样设置的css样式不存在浏览器兼容问题,在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
下面以实例说明div100%的问题:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DivHeight100%_Test</title>
<styletype="text/css">
<!--
html,body{
margin:0px;
height:100%;
}
#deman{
height:100%;
background-color:#CCF;
}
.cc{
background-color:#9C9;
height:auto;
}
-->
</style>
</head>
<body>
<divid="deman">
<divclass="cc">DivHeight100%_Test</div>
</div>
</body>
</html>
相关文章推荐
- div高度、宽度100%|div width、height 100% - div100%
- div高度、宽度100%|div width、height 100% - div100%
- asp.net 中如何得到图片的高度(height)和宽度(width)以及生成图片的缩略图 C#
- textarea文本域宽度和高度(width、height)自己主动适应变化处理
- textarea文本域宽度和高度(width、height)自己主动适应变化处理
- asp.net 中如何得到图片的高度(height)和宽度(width)以及生成图片的缩略图 C#
- HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
- textarea文本域宽度和高度(width、height)自己主动适应变化处理
- 纯CSS 实现DIV 高度 height 100% 全屏布局
- Div的宽度与高度的100%设定
- Div的宽度与高度的100%设定
- textarea文本域宽度和高度(width、height)自己主动适应变化处理
- VB长度宽度高度单位,width,scaleWidth,Height,scaleHeight,scaleMode
- HTML表格标记教程(31):单元格的宽度和高度属性WIDTH、HEIGHT
- 设置div table 等元素高度宽度百分之一百 100% 无效解决办法...
- textarea文本域宽度和高度(width、height)自动适应变化处理
- 用 jQuery 取得 Div 的宽度与高度(Width, Padding, Border, Margin)
- #431 – 绑定控件的宽度到高度(Binding a Control’s Width to Its Height)
- HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
- 关于Div的宽度与高度的100%设定