设置轮播（图像）高度等于窗口高度

Question

I have this page that loads a carousel but I want the carousel to fit in the window without having the vertical scrollbar as shown in the picture. How can I achieve that please?

Page:

<div id="carouselIndicators" class="carousel slide"  data-bs-ride="carousel" style="margin-bottom:40px;">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner rounded-corners">
        <div class="carousel-item active">
            <img src="/images/carousel/carosel1.jpg" class="d-block w-100" alt="carosel1">
            <div class="carousel-caption d-none d-md-block">
                <h1 class="text-success fw-bold fst-italic font-monospace">Seamless Allocation of Subjects</h1>
                <p class="text-warning fst-italic">
                     ****************Some Text****************
                    </p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/carousel/carosel2.jpg" class="d-block w-100" alt="carosel2">
            <div class="carousel-caption d-none d-md-block">
                <h1 class="text-success fw-bold fst-italic font-monospace">Even Distribution of Classes</h1>
                <p class="text-warning fst-italic">
                    ****************Some Text****************

                </p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/carousel/carosel3.jpg" class="d-block w-100" alt="carosel3">
            <div class="carousel-caption d-none d-md-block">
                <h1 class="text-success fw-bold fst-italic font-monospace">Class Management</h1>
                <p class="text-warning fst-italic">
                   ****************Some Text****************
               </p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" id="#carouselIndicators-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" id="#carouselIndicators-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Current View: click to view the rendered view

Answer 1

You need to use slider height as calc attribute For example

height: calc(100vh - 0px); //Increase/decrease the value in pixel as needed

Then increase/decrease the value in pixels so that for every screen your slider will take windows height. Let me know if this will work for you.