如何使Navbar和Carousel始终保持全屏显示

我想在页面顶部显示一个导航栏。在此之下，我需要轮播，该轮播应始终占据整个剩余屏幕。

这是我的导航栏：

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
ele = WebDriverWait(driver,10).until(EC.element_to_be_clickable((By.XPATH,element)))
ele.click()

这是我的旋转木马：

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

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

添加此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>

图像比例不是相同的视口比例。如果不使用 background 图像，很难完成这项工作...

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

是否要从屏幕上剪切图像？
缩小以适合屏幕宽度或高度（需要保持宽高比）吗？
拉伸以适合（导致变形的图像失去长宽比）？

选项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(..);
}

HTML

<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中使用的弹性框。使用calc确定转盘的高度（减去Navbar高度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 Carousel Full Screen

如何使Navbar和Carousel始终保持全屏显示

duoqing321 回答：如何使Navbar和Carousel始终保持全屏显示

大家都在问