Bootstrap4 Carousel Height

Question

I'm trying to get the Carousel to take up the space between the nav header and footer so that it takes up the full screen with no scroll bar or spaces in between and is responsive.

I think the issue is with the div class="carousel-item" as when I comment the code out line by line this is the only line that gets rid of the vertical scroll bar.

Resizing the screen by reducing the height makes a vertical scroll bar which I don't want. Resizing the screen by reducing the width makes a gap between image and footer which I don't want either.

Have tried lots of different ways..

HTML:

<!-- Page content -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/first.jpg" class="d-block w-100 fluid-img" alt="...">
        </div>
        <div class="carousel-item">
            <img src="images/first.jpg" class="d-block w-100 fluid-img" alt="...">
        </div>
    </div>

    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Bootstrap4 CSS:

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

My own CSS:

/*background image*/
body{
    background-image:url("../images/grass3.png");
    width:100%;
    height:100vh !important; //max size
}

.carousel-inner{
    max-height:100% !important;
    min-height:100% !important;
}

---

Answer 1

I would probably remove this:

.carousel-inner{
    max-height:100% !important;
    min-height:100% !important;
}

I'd either: wrap the

body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
footer {
  height: 50px;
  background: #ccc;
}

#carouselExampleControls {
  flex-grow: 1;
  background: #eee;
}

<div class="wrapper">
  <header>
    Header
  </header>
  <div id="carouselExampleControls">
    Carousel
  </div>
  <footer>
    Footer
  </footer>
</div>

Or: Assuming your header and footer height is fixed, add those two values together (let's say that equals 200px) and use the css calc property on your .carousel-inner class.

.carousel-inner {
  height: calc(100vh-200px);
}