屏幕宽度小于1007px时section高度不随内容变化导致重叠问题求解

问题原因 #

• 你为.main容器设置了固定高度，宽屏为225px、小屏为450px，当内部内容的实际高度超过你设置的固定值时，内容会溢出容器
• section的高度默认只会计算正常文档流内的内容高度，溢出的内容不会被纳入高度计算，因此第一个section的内容会和下方第二个section重叠

解决方案 #

方案1：将固定高度改为最小高度（兼容性好，保留原有高度约束） #

把原有CSS中.main的height属性替换为min-height，这样容器高度可以随内容自动拉伸，不会出现溢出：

/* 修改前 */
.main {
    height: 225px;
    margin:auto;
}
@media screen and (max-width: 1007px) {
    .main {
        height: 450px;
    }    
}

/* 修改后 */
.main {
    min-height: 225px;
    margin:auto;
}
@media screen and (max-width: 1007px) {
    .main {
        min-height: 450px;
    }    
}

方案2：删除固定高度，完全自适应（更灵活，适配任意内容高度） #

直接删掉.main的高度属性，依托flex布局的自适应特性，容器高度会完全由内部内容撑开，不需要手动计算不同屏幕下的高度值：

/* 直接删除.main的height属性即可 */
.main {
    margin:auto;
}
/* 媒体查询中也删掉.main的height设置 */
@media screen and (max-width: 1007px) {
    .big {
        width: 100%;
    }
    .small {
        height: 100%;
    }
}

额外优化建议 #

如果需要保证小盒子的高度一致性，可以给.small类增加min-height属性约束最小高度，避免内容过少时盒子高度塌陷：

.small {
    min-height: 110px; /* 按需调整数值即可 */
    height: 50%;
    width: 100%;
}

内容的提问来源于stack exchange，提问作者Yaniv Aflalo