javascript - Bootstrap4 轮播高度

Question

我试图让轮播占据导航页眉和页脚之间的空间，以便它占据整个屏幕，中间没有滚动条或空格，并且具有响应能力。

我认为问题出在 div class="carousel-item"上，因为当我逐行注释代码时，这是唯一摆脱垂直滚动条的行。

通过减小高度来调整屏幕大小会产生我不想要的垂直滚动条。通过减小宽度来调整屏幕大小会在图像和页脚之间产生间隙，这是我也不想要的。

尝试了很多不同的方法..

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;
}

我自己的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

我可能会删除这个:

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

我要么: 包裹起来

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>

或者:假设页眉和页脚高度是固定的，将这两个值加在一起(假设等于 200px)，并在 .carousel-inner 类上使用 css calc 属性。

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