Swiper设置高度后外层div未同步收缩的问题求助

核心问题根源 #

1. 百分比高度的依赖缺失：.mySwiper2设置height:50%时，其父容器没有明确高度值，导致百分比高度没有计算基准，无法正常生效。
2. CSS样式重复定义：代码中重复声明了.swiper类的height:20%，与.mySwiper2的height:50%产生优先级冲突，导致高度计算异常。

具体修复步骤 #

1. 清理重复CSS定义

合并重复的.swiper基础样式，避免优先级混乱：

/* 合并后的基础swiper样式 */
.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    background-size: cover;
    background-position: center;
    /* 垂直居中内容 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

2. 给外层容器设置明确高度

确保.mySwiper2的父容器有明确高度，让百分比高度有计算参照：

.container {
    height: 80vh; /* 也可设置具体像素值，如600px */
}

3. 调整两个Swiper的高度比例

现在可以正常设置.mySwiper2和.mySwiper的高度，确保高度总和合理：

.mySwiper2 {
    height: 70%; /* 原50%可正常生效 */
    width: 100%;
}

.mySwiper {
    height: 25%;
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
    margin-top: 5%; /* 用margin填充剩余空间 */
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

4. 可选：用Flex布局替代百分比高度

若不想依赖百分比高度，可使用Flex布局让父容器自动分配空间：

.container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 两个swiper之间的间距 */
}

.mySwiper2 {
    flex: 4; /* 占4份空间 */
    width: 100%;
}

.mySwiper {
    flex: 1; /* 占1份空间 */
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
}

修改后的完整示例代码 #

<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
.container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mySwiper2 {
    flex: 4;
    width: 100%;
}

.mySwiper {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
}

.mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}
</style>

<div class="container">
  <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
      <div class="swiper-slide">
        <img src="https://i.ytimg.com/vi/XayyES2vO8Q/hq720.jpg">
      </div>
    </div>
  </div>
</div>

<script>
var swiper = new Swiper(".mySwiper", {
  loop: true,
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
  loop: true,
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: swiper,
  },
});
</script>

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