如何使导航栏和轮播组合在一起始终全屏

Question

我想在页面顶部有一个导航栏。在其下方，我想要我的轮播，它应该始终占据整个剩余的屏幕。

这是我的导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/artworks">Artworks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/collection">Fashion Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact me</a>
                </li>
            </ul>
          <form class="form-inline my-2 my-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
                </a>
          </form>
        </div>
      </nav>

这是我的轮播：

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">

                <div class="carousel-item active">
                        <img src="/images/test.jpg" class="d-block w-100" alt="...">
                        <a href="/artworks">
                            <div class="carousel-caption d-none d-md-block carousel-title ">
                            <h1>Get to my artworks...</h1>
                            <p>Lorem ipsum dolor sit amet</p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                        <img src="/images/test.jpg" class="d-block w-100" alt="...">
                        <a href="/collection">
                            <div class="carousel-caption d-none d-md-block carousel-title">
                            <h1>Get to my fashion collection...</h1>
                            <p>Lorem ipsum dolor sit amet </p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                          <img src="/images/test.jpg" class="d-block w-100" alt="...">
                          <a href="/blog">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Get to my blog...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="/images/test.jpg" class="d-block w-100" alt="...">
                            <a href="/about">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Read some stuff about me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="/images/test.jpg" class="d-block w-100" alt="...">
                            <a href="/contact">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Contact me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

          </div>

          <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

这些片段或多或少是直接取自引导网站的。这些只是为了我的目的而调整的。那么如何让轮播占据导航栏下方的整个屏幕呢？有任何想法吗？

Answer 1

添加这个CSS

.carousel { height: calc(100vh - 56px);}
.carousel-inner,.carousel-item { height: 100%;}
.carousel-item { background-color: #000;}
.carousel-item img { height: 100%; object-fit: cover; object-position: center;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/artworks">Artworks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/collection">Fashion Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact me</a>
                </li>
            </ul>
          <form class="form-inline my-2 my-lg-0">
                <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
                </a>
          </form>
        </div>
      </nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">

                <div class="carousel-item active">
                        <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                        <a href="/artworks">
                            <div class="carousel-caption d-none d-md-block carousel-title ">
                            <h1>Get to my artworks...</h1>
                            <p>Lorem ipsum dolor sit amet</p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                        <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                        <a href="/collection">
                            <div class="carousel-caption d-none d-md-block carousel-title">
                            <h1>Get to my fashion collection...</h1>
                            <p>Lorem ipsum dolor sit amet </p>
                            </div>
                        </a>
                      </div>

                      <div class="carousel-item">
                          <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                          <a href="/blog">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Get to my blog...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                            <a href="/about">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Read some stuff about me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

                        <div class="carousel-item">
                            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
                            <a href="/contact">
                                <div class="carousel-caption d-none d-md-block carousel-title">
                                    <h1>Contact me...</h1>
                                    <p>Lorem ipsum dolor sit amet</p>
                                </div>
                            </a>
                        </div>

          </div>

          <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

Answer 2

图像比例与视口比例不同。如果不使用背景图像，很难完成这项工作......

您需要考虑当视口和图像比率不相等时会发生什么......

• 您想要将图像从屏幕上剪掉吗？
• 缩小以适应屏幕宽度或高度（需要保持纵横比）？
• 拉伸以适应（导致图像扭曲并失去纵横比）？

选项1

为了使轮播填充该导航栏下的剩余高度，请使用flex-grow:1。然后，当图像边缘对于屏幕（视口宽度）来说太宽时，剪裁图像边缘。这允许图像填充高度，但不会失去其纵横比。

演示： https: //www.codeply.com/p/5QnXTjbOFL

CSS

/* make active item container fill height of viewport using flexbox */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    flex: 1 0 100%;
}

/* fix transitioning item height */
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
    flex: 0 0 0;
}

/* make images fill height and width or clip */
.carousel-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-1 {
    background-image: url(..);
}

.img-2 {
    background-image: url(..);
}

超文本标记语言

<div class="container-fluid d-flex min-vh-100 flex-column px-0 justify-content-center">
    <nav class="navbar navbar-expand-md navbar-light bg-light flex-shrink-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="carouselExampleControls" class="carousel slide flex-fill d-flex flex-column  justify-content-center" data-ride="carousel">
        <div class="carousel-inner flex-fill d-flex flex-column">
            <div class="carousel-item active img-1">
            </div>
            <div class="carousel-item mg-2">
            </div>
        </div>
    </div>
</div>

选项2

如果必须使用图像，则object-fit无需使用选项 1 中使用的 Flexbox 即可开始工作。使用 calc 确定轮播的高度（减去 56px 的导航栏高度）。这将阻止垂直滚动条...

/* make images fill height and width or clip */
.carousel-item > img {
    object-fit: cover;
    height: calc(100vh - 56px);
    width: 100%;
}

演示 2： https: //www.codeply.com/p/HR6phylC7q

另请参阅：Bootstrap 轮播全屏