当轮播内容更改其高度/内容时，页面会跳转

Question

当 boostrap 轮播被包装并且包装器被position:absolute时，我的页面上遇到了一个有趣的行为......因此，当页面向下滚动一点并且接下来carousel-item有不同的height页面只是"跳跃"时......

我的home-hero-wrapper是 100vh，包裹旋转木马的carousel-home-wrapper绝对位于底部。无论carousel-item的大小如何，它都将位于home-hero-wrapper的底部

问题：一切正常，直到您向下滚动页面一点(轮播必须仍在视口上)并且在轮播过渡上页面只是"跳跃"......但是home-hero-wrapper不会改变大小，我不明白为什么这些部分会这样......

我错过了什么？有什么提示吗？

下面的代码片段重现了该问题：

.home-hero-wrapper {
height: 100vh;
min-height: 200px;
position: relative;
}
.carousel-home-wrapper {
position: absolute;
bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-hero-wrapper bg-info">
<div class="hero-image" style="background-image: url(https://via.placeholder.com/1024x800);">
</div>
<div class="carousel-home-wrapper">
<div 
id="carousel_home" 
class="carousel slide carousel-fade" 
data-ride="carousel"
data-interval="1000"
>
<div class="carousel-inner">
<div class="carousel-item bg-light active">
<h2>Content Shorter</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
<div class="carousel-item p-3 bg-light">
<h2>Content Longer</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.</p>
</div>
</div>
</div><!-- #carousel_home -->
</div><!-- .carousel-home-wrapper -->
</div><!-- home-hero-wrapper -->
<div class="p-5 bg-warning">
<h2>Scroll until here</h2>
<h3>Make sure carousel still visible</h3>
<p>Waiting until carousel transition... All sections will "jump"</p>
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5 bg-danger">
<h2>Make sure carousel still visible</h2>
</div>

Answer 1

好的，要做到这一点，首先将类p-3添加到两个carousel-item<div>或从两者中删除。

其次，从id#carousel_home的<div>中删除所有类。

---

另外，添加此 CSS：

.carousel-item{
height: 130px;
}

---

现在，如果carousel-item内的text比页面的full width短，那么text只需要width量。

如果carousel-item内的text将比页面的width长，则text将转到下一行。

此外，它将锚定页面bottom的classhome-hero-wrapper蚁。查看下面link的实时代码(新)

---

在此处查看实时代码(新)： https://codepen.io/manaskhandelwal1/pen/QWbpvMW

---

在此处查看实时代码(旧)： https://codepen.io/manaskhandelwal1/pen/zYGNyxg

---