html – How do I make a div the size of its parent div?

Hello, I am creating image slider (like Netflix) using sweepers. But I have problems with my front and back buttons. With the CSS I have, the buttons take up 100 heights of the entire screen and do not match the slider.

HTML:

       <section class="thumbSection">
       <h2 class="thumbTitle">Popular Now</h2>
       <div class="thumbTiles swiper-container">

            <!-- Navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- Wrapper -->

            <div class="swiper-wrapper">

                <!-- Slides -->
                <div class="swiper-slide">
                    <a class="thumbTile" href="#">
                        <img class="thumbTile__image"
                            src="https://imagelink"
                            alt="The Queen's Gambit">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a class="thumbTile" href="#">
                        <img class="thumbTile__image"
                            src="https://imagelink
                            alt="Dark">
                    </a>
                </div>

CSS:

.thumbTiles .swiper-button-prev,
.thumbTiles .swiper-button-next {
height: 100%;
width: 4%;
width: calc(4% - 5px);
top: 0;
bottom: 0;
margin: 0;
background-color: rgba(20, 20, 20, 0.5);

A

With this code the navigation buttons appear like this (I don’t know if it’s clear on the image or not but the front and back buttons take 100% of the page height. The front and back buttons take 100% of the page height.

Do you know how I can fit them with 100% height of slider and their parent dave (on netflix web page) instead of full screen?

I used the code from this guy’s link (https://jsfiddle.net/iamstratos/oudachrn/1/) but when I tried it he had the same problem as me.

Thanks for the help 🙂

Leave a Reply

Your email address will not be published.