admin管理员组

文章数量:1611925

下面这段代码你猜猜div有多大

<body>
<div>Overlay example text</div>
</body>
<style>
*{
	padding: 0;
	margin:0;
}
body {
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}</style>


实在是没想到居然始终是和屏幕的视口那样子大，为啥嘞。
因为没有给定位祖先那么定位祖先就是body，body有多大？？推测默认是浏览器的视口全屏（没找到说大小的额）
请看 这篇文章：关于body的默认尺寸

解决方法也是非常简单加上定位祖先就行：这里可以查看效果

本文标签： 全屏自适应盒子神奇操作

版权声明：本文标题：css的神奇操作之 height 100% position: absolute； 自适应全屏盒子 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728605228a1165364.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。