为什么盒子绝对定位了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;
}

https://img.mukewang.com/climg/62b040780929ed1507610990.jpg

写回答

1回答

好帮手慕慕子

2022-06-20

同学你好,问题解答如下:

1、因为hieght:100%;是根据祖辈元素设置的height属性进行计算的,没有设置绝对定位时,banner-nav的祖辈盒子并没有明确设置height属性值,所以给banner-nav设置的height:100%;不会生效。

2、设置了绝对定位后,脱离了文档流,设置的height:100%;会根据参考定位的元素的实际高度进行计算,此时并不需要给祖辈元素明确设置height属性,就可以生效。

祝学习愉快~


0

0 学习 · 17877 问题

查看课程

相似问题

回答 1

回答 1

回答 1

绝对定位

回答 1