首页 > 代码库 > 理解height 百分比 height:100%
理解height 百分比 height:100%
当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（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%
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。