为什么盒子绝对定位了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属性,就可以生效。
祝学习愉快~
相似问题