按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？
html{ width: 100%;height: 100%;}拿谁的宽高？
经过测试，是当前浏览器窗口的大小
看图
<body>
<div "func()">xxx</div>
</body>
<script>
function func(){
var div = document.getElementsByTagName("div")[0];
alert(parseInt(getStyle(div,"width"))+"--"+parseInt(getStyle(div,"height")));
}
function getStyle(ele,attr){
if(window.getComputedStyle){
return getComputedStyle(ele,null)[attr];
}
else{
return ele.currentStyle[attr];
}
}
</script>
全屏幕下，是1506-686
缩放下
其实可以写成
html{ width: 100%;height: 100%}
body{height:100%}
div{
height: 100%;/* 再次证明高度不能继承 */
background-color: salmon;
}
宽度100%不用写，可以继承，但是如果不写height,就会得不到可视区域的高度
本文探讨了CSS中百分比布局的实现原理，特别是在html元素设置为100%宽高时，其参照的是浏览器窗口的大小。通过示例代码演示了如何在不同缩放级别下获取div元素的真实尺寸，并讨论了高度继承的误区。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
