码迷,mamicode.com
首页 > 其他好文 > 详细

理解height 百分比 height:100%

时间:2015-01-05 14:41:56      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

当你让一个元素的高度设定为百分比高度时,是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度(height)时或设置的高度值百分比不生效时,浏览器会根据其子元素来确定父元素的高度,所以当无法根据获取父元素的高度,也就无法计算自己高度。 换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果,也就是一个null值,浏览器不会对这个值有任何的反应。


html 的父元素可以理解成window,浏览器会将html填充填充完一个浏览器窗口。 设置html的height为具体的像素值,当其值大于浏览器窗口时,浏览器出现滚动条,当其值小于浏览器窗口时,同样会将html填充完整个浏览器窗口(可以设置背景测试)。设置html的height为百分比时,当其值大于100%出现滚动条,当小于100%时同样会将html填充完整个浏览器窗口(可以设置背景测试)。 但是子html的子元素的高度设置成百分比时,会按照html设置的高度值计算比例。


对于body的设置的高度小于浏览器窗口时,同样会填充满整个浏览器窗口(可以设置背景测试),但是其子元素的高度设置成百分比时,会按照body设置的高度值来计算比例。

 

<!doctype html>
<html  style="height:50%; background-color:#9F0">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body   style="height:100%; ">
 <div style="height:100%; background-color:#FFF" >
 html的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。
  </div>
</body>
</html>

技术分享

<!doctype html>
<html  style="height:50%; ">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body   style="height:100%; background-color:#9F0">
 <div style="height:100%; background-color:#FFF" >
 body的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。
  </div>
</body>
</html>

技术分享

 

 

<!doctype html>
<html  style="height:150%; ">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body   style="height:100%; background-color:#9F0">
 <div style="height:100%; background-color:#FFF" >
 html的高度设置成大于浏览器窗口高度,会出现滚动条。
  </div>
</body>
</html>

 

技术分享

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body   style="height:50%; background-color:#9F0">
 <div style="height:100%; background-color:#FFF" >
   由于html没有设置高度,在body上面设置height:50%,未达到预期效果
  </div>
</body>
</html>

技术分享

 

<!doctype html>
<html style=" height:100%">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body   style="height:50%; background-color:#9F0">
 <div style="height:100%; background-color:#FFF" >
   由于html没有设置高度,在body上面设置height:50%,未达到预期效果
  </div>
</body>
</html>

技术分享

理解height 百分比 height:100%

标签:

原文地址:http://www.cnblogs.com/lion88/p/4203240.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!