Bootstrap4 轮播高度

Question

我正在尝试让 Carousel 占据导航页眉和页脚之间的空间，以便它占据整个屏幕，中间没有滚动条或空格并且是响应式的。

我认为问题出在 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);
}