Je veux avoir une barre de navigation en haut de ma page. En dessous, je veux mon carrousel qui devrait toujours occuper tout l'écran restant.

Voici ma barre de navigation:

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

et voici mon carrousel:

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

Ces extraits sont plus ou moins directement extraits du site Web de bootstrap. Ceux-ci sont juste ajustés à mes fins. Alors, comment puis-je faire en sorte que le carrousel occupe tout l'écran sous la barre de navigation? Des idées?

html css bootstrap-4
1
MockingJay 8 nov. 2019 à 07:06

1 réponse

Meilleure réponse

Ajouter ce 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>
2
Yudiz_Webdesign 8 nov. 2019 à 08:37

Questions connexes

24 Comment faire une div à 100% de la hauteur de la fenêtre du navigateur

De nouvelles questions

4 cliquez sur le bouton après avoir coché la radio d'entrée
6 Le code ne revient pas à son état d'origine après l'exécution lorsque nous supprimons la case à cocher?
3 Comment changer l'image de fond de div?
3 Pourquoi justify-content: center échoue-t-il lorsque je rétrécis la largeur de la fenêtre?
3 Comment puis-je aligner mon texte / bordure au centre de ma page avec l'élément <div>?
3 Jquery / JavaScript obtient la valeur d'un td de table qui se trouve à l'intérieur d'un div avec id
3 Comment afficher le texte saisi par l'utilisateur depuis textarea sur la même page?
3 L'attribut Javascript requis ne fonctionne pas avec e.preventDefault
4 Impossible d'attribuer plusieurs éléments HTML dans la fonction .css ()
3 Variables partagées dans TypeScripts comme dans JS
Toutes les questions sur html >