为什么盒子绝对定位了height:100%才会生效
来源:2-9 大Banner的布局(2)
xcn_aaaa
2022-06-20 17:39:07
/* banner部分 */ .banner { position: relative; } .banner img { width: 100%; min-width: 1152px; } .banner .center-wrap { /* 只要有压盖,第一时间就要想到绝对定位 */ position: absolute; top: 0; left: 50%; width: 1152px; margin-left: -576px; height: 100%; } .banner .center-wrap .banner-nav { height: 100%; } .banner .center-wrap .banner-nav>ul { height: 100%; } .banner .center-wrap .banner-nav>ul>li { width: 296px; height: 16.66%; background-color: rgba(0, 0, 0, .53); border-bottom: 1px solid #9e9e9e; box-sizing: border-box; }
1回答
同学你好,问题解答如下:
1、因为hieght:100%;是根据祖辈元素设置的height属性进行计算的,没有设置绝对定位时,banner-nav的祖辈盒子并没有明确设置height属性值,所以给banner-nav设置的height:100%;不会生效。
2、设置了绝对定位后,脱离了文档流,设置的height:100%;会根据参考定位的元素的实际高度进行计算,此时并不需要给祖辈元素明确设置height属性,就可以生效。
祝学习愉快~
相似问题