Css 如何使引导导航和旋转木马以100vh的速度配合在一起？_Css_Bootstrap 4

Css 如何使引导导航和旋转木马以100vh的速度配合在一起？

css bootstrap-4

Css 如何使引导导航和旋转木马以100vh的速度配合在一起？,css,bootstrap-4,Css,Bootstrap 4,我正在尝试将引导导航和旋转木马安装在屏幕上，而不会出现任何溢出。换句话说，我希望导航和旋转木马能够以100vh的速度安装在一起，而不会出现任何溢出我尝试添加img流体：100vh但是当我一直滚动到顶部时，这会使旋转木马溢出我还尝试在导航和旋转木马周围添加一个div，并尝试在其中添加一个100vh，但没有成功下面是代码笔中的代码。谢谢你的帮助。文件 .img液{ 高度：100vh； } 灰姑娘的玻璃手机 Lorem ipsum dolor sit amet

我正在尝试将引导导航和旋转木马安装在屏幕上，而不会出现任何溢出。换句话说，我希望导航和旋转木马能够以100vh的速度安装在一起，而不会出现任何溢出

我尝试添加

img流体：100vh但是当我一直滚动到顶部时，这会使旋转木马溢出
我还尝试在导航和旋转木马周围添加一个div，并尝试在其中添加一个100vh
，但没有成功
下面是代码笔中的代码。谢谢你的帮助。


文件
.img液{
高度：100vh；
}















灰姑娘的玻璃手机
Lorem ipsum dolor sit amet
灰姑娘的玻璃手机
Lorem ipsum dolor sit amet
白雪公主
Lorem ipsum dolor sit amet
白雪公主
Lorem ipsum dolor sit amet
美女与野兽
Lorem ipsum dolor sit amet
博卡汉斯
Lorem ipsum dolor sit amet
>
[1]: https://codepen.io/christiangutierrezreyez/pen/vwpQdN
如果从nav
中删除mb-3
类，则此css将工作：
#MagicCarousel，
#MagicCarousel>分区，
#MagicCarousel>div>div>img{
高度：计算（100vh-56px）；
}

…其中“56px”是导航的高度
#MagicCarousel{
高度：90vh；
}
navbar先生{
高度：10vh
}
.carousel内部，.carousel项目{
身高：100%；
}
.传送带项目{
溢出：隐藏；
}

文件















灰姑娘的玻璃手机
Lorem ipsum dolor sit amet
灰姑娘的玻璃手机
Lorem ipsum dolor sit amet
白雪公主
Lorem ipsum dolor sit amet
白雪公主
Lorem ipsum dolor sit amet
美女与野兽
Lorem ipsum dolor sit amet
博卡汉斯
Lorem ipsum dolor sit amet
我不知道你可以在CSS中进行这样的计算。我感谢你的帮助。
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--BOOTSTRAP CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- FONTAWESOME CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <!--TITLE-->
  <title>Document</title>

<!-- CUSTOM CSS -->
<style>
.img-fluid {
  height: 100vh;
}
</style>
</head>

<body>
  <!-- BODY -->
  <div id="navslider-vh"></div>
  <!-- NAVIGATION -->
  <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
    <div class="container">
      <!-- BRAND -->
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <!-- LINK 1 -->
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <!-- LINK 2 -->
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <!-- LINK 3 -->
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <!-- LINK 4 -->
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- END NAVIGATION -->


  <!-- CAROUSEL -->
  <div id="MagicCarousel" class="carousel slide" data-ride="carousel">
    <!-- CAROUSEL INDICATORS-->
    <ol class="carousel-indicators">
      <li data-target="#MagicCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#MagicCarousel" data-slide-to="1"></li>
      <li data-target="#MagicCarousel" data-slide-to="2"></li>
      <li data-target="#MagicCarousel" data-slide-to="3"></li>
      <li data-target="#MagicCarousel" data-slide-to="4"></li>
    </ol> <!-- END CAROUSEL INDICATORS-->
    <div class="carousel-inner" role="listbox">
      <!-- SLIDE 1 -->
      <div class="carousel-item active">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="First Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 2 -->
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="Second Slide">
        <div class="carousel-caption">
          <h3>Cinderalla</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 3 -->
      <div class="carousel-item">
        <img class="d-block w-100" src="https://source.unsplash.com/random/1920x1080" alt="Third Slide">
        <div class="carousel-caption">
          <h3>Snow White</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 4 -->
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="Fourth Slide">
        <div class="carousel-caption">
          <h3>Snow White</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 5 -->
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="Fifth Slide">
        <div class="carousel-caption">
          <h3>Beauty and the Beast</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- SLIDE 6 -->
      <div class="carousel-item">
        <img class="d-block w-100 img-fluid" src="https://source.unsplash.com/random/1920x1080" alt="Sixth Slide">
        <div class="carousel-caption">
          <h3>Pokahauntes</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

      <!-- CONTROLS -->
      <a href="#MagicCarousel" role="button" data-slide="prev" class="carousel-control-prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#MagicCarousel" role="button" data-slide="next" class="carousel-control-next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
      </a>


    </div><!-- END CAROUSEL INNER -->
  </div><!-- END CAROUSEL -->
  </div> <!-- END NAVSLIDER-VH -->>

</body> <!-- END OF BODY -->
<!-- JQUERY JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- POPPER JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- BOOTSTRAP JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>


  [1]: https://codepen.io/christiangutierrezreyez/pen/vwpQdN