SwiperJS无法占满父div 100%高度的问题排查求助

问题核心原因 #

• 你配置了autoHeight: true，该属性会强制Swiper容器高度跟随当前显示的slide内容高度自适应，无法继承父容器高度
• Swiper相关的上级容器未正确设置高度继承规则，导致img的高度100%找不到对应的基准节点
• 额外冗余问题：HTML中重复引入了两次Swiper的JS文件，容易引发未知功能冲突

修改步骤 #

1. 调整Swiper初始化配置

删除autoHeight: true配置项，修改后的JS代码：

const swiper = new Swiper('.swiper-container', {
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 2500,
      disableOnInteraction: true,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
})

2. 补充CSS高度规则

在原有CSS基础上新增两个样式规则，也可以直接替换对应原有样式：

/* 原有样式基础上新增height:100% */
.swiper-container {
    width: 100%;
    height: 100%;
}
/* 新增swiper-slide高度规则 */
.swiper-slide {
    height: 100%;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

3. 清理冗余JS引入

删除HTML中任意一个Swiper JS引入代码，保留一份即可：

<!-- 删掉其中一行即可 -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

修改完成后，flex布局下左侧的.slider-container会自动和右侧文字区域高度保持一致，Swiper会完整占满父容器的宽高，图片也会通过object-fit: cover保持比例填充整个slide区域。

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