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
58760217

Questions connexes

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

De nouvelles questions

2 Comment centrer les bordures dans une autre case?
2 Problème de bouton CSS Bootstrap, pas de changement de couleurs
3 <li> éléments mis en ligne lors du redimensionnement de ma fenêtre
2 Comment positionner le div absolu par rapport à un autre div
3 Comment voir les modifications de la page Web sans effacer le cache du navigateur?
2 Le lien du nom du profil n'apparaît pas sur l'utilisateur, qui est commenté sur le message
3 Comment faire afficher l'image en tant qu'élément de bloc lorsque sa balise h2 à l'intérieur
3 Manipuler le contenu # pour tous les éléments div (avec role = "tabpanel") - style = "display: none;" pour afficher: bloquer;
2 Appliquer la propriété de rayon de bordure à la fenêtre du navigateur?
2 Comment ajouter un tableau à un div?
Toutes les questions sur html >

html

HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].

Plus à propos html...