Страница переходит, когда содержание карусели меняет ее высоту / содержание

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> или удалите из обоих.

Во-вторых, удалите все классы из <div> с идентификатором #carousel_home.

---

Также добавьте это CSS:

.carousel-item{
  height: 130px;
}

---

Теперь, если text внутри carousel-item будет короче, чем full width страницы, тогда потребуется только та сумма width, принятая text.

И если text внутри carousel-item будет длиннее width страницы, затем text переведет go на следующую строку.

Кроме того, он будет закреплен с class home-hero-wrapper и bottom из стр. Посмотрите на действующий код с link ниже (NEW)

---

См. Живой код здесь (NEW): https://codepen.io/manaskhandelwal1/pen/QWbpvMW

---

См. живой код здесь (OLD): https://codepen.io/manaskhandelwal1/pen/zYGNyxg

---