CSS父元素无法自适应子元素高度求助：轮播图内容重叠

问题根源很明确：你给轮播图里的图片设置了position:absolute，绝对定位的元素会脱离正常文档流，导致.slideshow容器无法获取图片的高度，直接塌陷成高度为0的盒子。下面的section会往上顶，自然被悬浮的图片盖住。

给你两个简单的修复方案，都能让父容器自适应图片高度，同时保留轮播的绝对定位结构：

方案一：利用宽高比+padding-top撑起容器高度 #

图片尺寸是1200×550，计算宽高比：550 ÷ 1200 × 100% ≈ 45.83%。通过给.slideshow设置padding-top实现自适应高度：

.container {
  display: flex;
  flex-direction: column;
  margin: 0; /* 去掉body默认margin，避免横向滚动条 */
}

.slideshow {
  position: relative;
  width: 100vw;
  padding-top: 45.83%; /* 按图片宽高比计算，撑起容器高度 */
  /* 删掉flex-grow:2，不需要强制抢占flex容器空间 */
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

HTML不需要改动，这样.slideshow会根据宽度自动计算出匹配图片比例的高度，父section也会跟着自适应，图片就不会再覆盖下面的内容了。

方案二：用伪元素占位（和方案一原理相同） #

如果不想修改.slideshow的padding，可以用伪元素来撑起高度：

.container {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.slideshow {
  position: relative;
  width: 100vw;
}

/* 伪元素占位，撑起容器高度 */
.slideshow::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 45.83%;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

两种方案的核心都是利用「padding百分比基于父元素宽度计算」的特性，让容器高度和图片比例绑定，不管屏幕宽度怎么变，容器高度都会自动适配，绝对定位的图片也能刚好填满容器，不会溢出或塌陷。

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