Navbar and carousel fitting

Question

好吧，这是我的代码：jsfiddle

基本上我的目标是使旋转木马的高度与Navbar相同。

这是我想象的链接。链接

我希望轮播的高度和宽度与屏幕相同，无论大小是什么。

对于一个体面的开发人员而言，这些事情可能很容易解决，但对于初学者来说却不是很容易的。我已经尝试了2小时，但到目前为止还没有任何解决方案。

任何帮助都将不胜感激。

CSS和HTML

.w-100 {
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 992px) {
    .navbar {
        height:80px;
    }
}
#mainNav {
    background-color: grey;
}
.navbar-dark .navbar-nav .nav-link {
    color: white !important;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(103, 255, 103) !important;
    cursor: pointer;
    -webkit-transition: color 0.7s ease-out;
    -moz-transition: color 0.7s ease-out;
    -o-transition: color 0.7s ease-out;
    transition: color 0.7s ease-out;
}
@media (min-width: 992px) {
    #mainNav {
        border-color: transparent;
        background-color: transparent;
    }
}

<nav class="navbar navbar-expand-lg navbar-dark" id="mainNav">
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
    <ul class="navbar-nav ml-auto text-center">
      <li class="nav-item active">
       <a class="nav-link" href="#">Muusika</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Allalaadimised</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Muusikavideod</a>
      </li>
    </ul>
  </div>
  <div class="mx-auto my-2 order-0 order-md-1 position-relative">
    <a class="mx-auto" href="#"><img src="https://www.upload.ee/image/8361734/OdysseyLogo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></button>
  </div>
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
    <ul class="navbar-nav mr-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="#">Uudised</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Allalaadimised</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Kontakt</a>
      </li>
    </ul>
  </div>
</nav>
<header>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://www.upload.ee/image/8364552/sliderimg.jpg" alt="Esimene slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.upload.ee/image/8364552/sliderimg.jpg" alt="Teine slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://www.upload.ee/image/8364552/sliderimg.jpg" alt="Kolmas slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Eelmine</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Järgmine</span>
    </a>
  </div>
</header>

Answer 1

您使用CSS vh单元给出.carousel-inner高度。因此，它总是可以匹配视口的高度。

尝试这个小提琴

Answer 2

您可以使用vh使用calc到carousel-inner

实现此目标

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 73px); // Added
}

在这里更新了小提琴