0

Tengo este codigo con un carrusel con bootstrap 5, necesito que el carrusel abarque el 100 del alto de la pantalla pero al utilizar las clases h-100 no las respeta, igual trate de utilizar las clases "position-relative" en el contenedor con la clase col-lg-12 y un h-100 en el contenedor con la clase carousel-inner, pero no las respeta. Alguien me puede ayudar?

<div class="row">
            <div class="col-lg-12" style="height: 100vh;">
                <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                    <div class="carousel-inner" >
                        <div class="carousel-item active" data-bs-interval="10000">
                            <img src="images/soluciones/ruta-1.png" class="d-block img-fluid h-100 px-5 px-lg-5"
                                alt="...">

                        </div>
                        <div class="carousel-item" data-bs-interval="2000">
                            <img src="images/soluciones/ruta-2.png" class="d-block img-fluid h-100 px-5 px-lg-5"
                                alt="...">

                        </div>
                        <div class="carousel-item">
                            <img src="images/soluciones/ruta-3.png" class="d-block img-fluid h-100 px-5 px-lg-5"
                                alt="...">

                        </div>
                        <div class="carousel-item">
                            <img src="images/soluciones/ruta-4.png" class="d-block img-fluid h-100 px-5 px-lg-5"
                                alt="...">

                        </div>
                    </div>
                    <button class="carousel-control-prev margen-carrusel-soluciones-l" type="button"
                        data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next margen-carrusel-soluciones-r" type="button"
                        data-bs-target="#carouselExampleDark" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>

2 respuestas 2

0

Dale a <body> un alto de 100vh y después agrégale a cada nodo hijo (descendientes tanto directos como indirectos) la clase h-100, esto es necesario porque h-100 usa como referencia el tamaño de su padre inmediato para ocupar todo su alto, entonces necesitas trasladar ese tamaño por todos los niveles del arbol:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <title>Document</title>
</head>

<body style="height: 100vh;">
  <div class="row h-100">
    <div class="col-lg-12 h-100">
      <div id="carouselExampleDark" class="carousel carousel-dark slide h-100" data-bs-ride="carousel">
        <div class="carousel-inner h-100">
          <div class="carousel-item active h-100" data-bs-interval="10000">
            <img src="https://i.ibb.co/b7mn492/presentacion-pc-7.jpg" class="d-block img-fluid h-100 px-5 px-lg-5" alt="...">
          </div>
          <div class="carousel-item" data-bs-interval="2000">
            <img src="https://i.ibb.co/P18zwgH/presentacion-pc-3.jpg" class="d-block img-fluid h-100 px-5 px-lg-5" alt="...">
          </div>
          <div class="carousel-item h-100">
            <img src="https://i.ibb.co/yhYVn4v/presentacion-pc-4.jpg" class="d-block img-fluid h-100 px-5 px-lg-5" alt="...">
          </div>
          <div class="carousel-item h-100">
            <img src="https://i.ibb.co/VJsdYPC/vacio-cocido.png" class="d-block img-fluid h-100 px-5 px-lg-5" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev margen-carrusel-soluciones-l" type="button"
          data-bs-target="#carouselExampleDark" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next margen-carrusel-soluciones-r" type="button"
          data-bs-target="#carouselExampleDark" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

  </div>
  <!-- <script src="scripts2.js" defer></script> -->
</body>
</html>

Una pregunta de SO en ingles interesante sobre este tema: Aqui

0

Según la documentación de Bootstrap, las clases h-100 y w-100 hacen que un elemento tenga el 100% de la altura y el ancho de su elemento padre, respectivamente. Sin embargo, si el elemento padre no tiene una altura definida, estas clases no tendrán ningún efecto.

Una posible solución sería aplicar la clase h-100 a un elemento padre que tenga una altura definida. Por ejemplo, podrías intentar aplicar la clase h-100 a un elemento div que envuelva todo el carrusel:

<div class="h-100">
   <div class="row">
       <!-- El resto de tu código de carrusel aquí -->
   </div>
</div>

Tema relacionado: CSS: el Height 100vh no funciona correctamente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.