Setting Carousel (Images) Height Equal to Window Height

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

You could try to simplify this question for yourself and ask how to do this with a single image, or even a `
Hello
`. The solution will be the same for all cases. — KIKO Software, May 21 '22 at 13:15
Have a look here: [How to make a div 100% height of the browser window](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window). Keep in mind you might need to take your menu into account, which is certainly possible. — KIKO Software, May 21 '22 at 13:21

score 0 · Answer 1 · answered May 21 '22 at 13:45

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.

Setting Carousel (Images) Height Equal to Window Height

1 Answers1