五种实现方式分别是如下：1.使用flex布局实现.wrapper{width:200px;高度：400px；边距：100px自动；/*这里的边距纯粹是为了测试时显示效果居中，没有实际用途*/background:aquamarine;显示：弹性；flex-direction:column;}.div1{height:100px;宽度：100%；背景色：紫色；order:0;}.div2{background-color:teal;宽度：100%；顺序：1；1;}2。下面的div使用position:absolute+top/bottom来实现.wrapper{width:200px;高度：400px；边距：100px自动；背景：水生；位置：相对；}.div1{高度：100px；背景颜色：紫色；}.div2{背景颜色：蓝绿色；宽度：100%；位置：绝对；顶部：100px；bottom:0;}3、下面的div设置margin-top为负值，实现.wrapper{width:200px;高度：400px；边距：100px自动；背景：海蓝宝石；ion:relative;}.div1{height:100px;背景色：紫色；位置：相对；}.div2{背景颜色：蓝绿色；宽度：100%；高度：100%；边距顶部：-100px；-尺寸：边框框；padding-top:100px;}4、外层div设置padding-top，内层div实现绝对定位。包装器{宽度：200px；高度：400px；边距：100px自动；box-sizing:border-box;填充顶部：100px；背景：海蓝宝石；位置：相对；}.div1{高度：100px；宽度：100%；背景色：紫色；位置：绝对；top:0;}.div2{背景颜色：蓝绿色；宽度：100%；height:100%;}5.上层div绝对定位，top:0;下面的div设置为box-sizing+padding-top.wrapper{width:200px;高度：400px；边距：100px自动；背景：海蓝宝石；位置：相对；}.div1{高度：100px；宽度：100%；背景色：紫色；蓝绿色；宽度：100%；高度：100%；牛大小：边框框；padding-top:100px;}第一次写文章，有什么问题欢迎指出，有其他实现方法欢迎交流~~