网页编写中因为div没有固定高度,里面的内容大小不一样导致div的高度自适应也是不一样的
.container {
overflow: hidden;
}
div.item {
padding-bottom: 500px;
margin-bottom: -500px;
}
原理:padding-bottom: 500px 会让三个盒子拉伸的非常高,然后利用 margin-bottom: -500px 将各个元素切割掉 500px,最后父元素将超出的部分隐藏,就出现了这个效果。统一称为最高那个。
第二种:利用父元素display:felx;
这依赖于 align-items 属性,它的默认值是 stretch,也就是在辅轴上将所有子项目拉伸为同一高度(或宽度)以保持对齐。