1

Estoy intentando manejar un carousel siguiendo un ejemplo pero se genera un vertical scroll cuando añado mi topnav. Css topnav:

html, body{
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav{
  background-color: #333;
  overflow: hidden;
  top: 0;
}

.topnav a{
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover{
  background-color: #ddd;
  color: black;
}

.topnav a.active{
  background-color: #04AA6D;
  color: white;
}

.topnav-right {
  float: right;
}

Css carousel:

.top-content {
    width: 100%;
    padding: 0;
}

.top-content .carousel-item {
    height: 100vh;
    min-height: 400px;
}

.top-content .carousel-item img {
    height: 100%;
    object-fit: cover;
}

.top-content .carousel-control-prev {
    border-bottom: 0;
}

.top-content .carousel-control-next {
    border-bottom: 0;
}

.top-content .carousel-caption {
    padding-bottom: 60px;
}

.top-content .carousel-caption h1 {
    padding-top: 60px;
    color: #fff;
}

.top-content .carousel-caption h3 {
    color: #fff;
}

.top-content .carousel-caption .carousel-caption-description {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
}

.top-content .carousel-indicators li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 50%;
}

Mi html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- CSS Folder -->
    <link rel="stylesheet" type="text/css" href="css/carousel.css"/>
    <link rel="stylesheet" type="text/css" href="css/media-queries.css"/>
    <link rel="stylesheet" type="text/css" href="css/topnavbar.css"/>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- JQuery Slim -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="topnav">
      <a href="#">Hoja uno</a>
      <a href="displays.html">Displays</a>
    </div>
    <!-- Top content -->
    <div class="top-content">
        <!-- Carousel -->
        <div id="carousel-example" class="carousel slide" data-ride="carousel">
          <!-- Barra superior -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-1">
                    <div class="carousel-caption">
                        <h1>Primer Título</h1>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-2">
                    <div class="carousel-caption">
                        <h3>Segundo Título</h3>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-3">
                    <div class="carousel-caption">
                        <h3>Tercer Título</h3>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!-- End carousel -->
    </div>
  </body>
</html>

Esto genera una vertical scroll:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

¿Cómo puedo hacer para que no se gerene el scroll? Ya se que puedo ocultarlo pero eso no soluciona el problema. Quiero que la imagen se adapte a la pantalla sin necesidad de scrollear.

2 respuestas 2

4

En tu hoja de estilos carousel.css estas especificando que este tenga una altura de 100vh. Pero ten en cuenta que el navbar ya esta ocupando una altura, por lo que estas tomando un total de 100vh+altura del navbar.

Particularmente veo que el navbar siempre ocupa una misma altura de 53px, por lo que mi recomendación seria que cambies el height de la siguiente forma.

.top-content .carousel-item {
    height: 100vh;
    min-height: 400px;
}

Por

.top-content .carousel-item {
  height: calc(100vh - 53px);
  min-height: 400px;
}
1
  • Buenísimo, esta fue la solución que utilicé. Muchas gracias Commented el 20 ago. 2021 a las 12:29
2

El problema se genera porque topnav se muestra como un bloque, eso hace que tu carousel se mueva hacia abajo y te genere un scroll. Los puedes solucionar de la siguiente formar.

  1. colocar en topnav como fijo para que el contenido pase por debajo o si esto no te parece debe colocarle a tu carousel una altura con .

html, body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav{
      position: fixed; /* Hace que no Top Nav quede fijo */
      z-index: 999;  /* posiciona tu Top Nav por encima de "todo" el contenido de tu pagina */
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      background-color: #333;
      overflow: hidden;
  }
  
  .topnav a{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover{
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active{
    background-color: #04AA6D;
    color: white;
  }
  
  .topnav-right {
    float: right;
  }

  .top-content {
    width: 100%;
    padding: 0;
}

.top-content .carousel-item {
    height: 100vh;
    min-height: 400px;
}

.top-content .carousel-item img {
    height: 100%;
    object-fit: cover;
}

.top-content .carousel-control-prev {
    border-bottom: 0;
}

.top-content .carousel-control-next {
    border-bottom: 0;
}

.top-content .carousel-caption {
    padding-bottom: 60px;
}

.top-content .carousel-caption h1 {
    padding-top: 60px;
    color: #fff;
}

.top-content .carousel-caption h3 {
    color: #fff;
}

.top-content .carousel-caption .carousel-caption-description {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
}

.top-content .carousel-indicators li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- CSS Folder -->
    <link rel="stylesheet" type="text/css" href="css/carousel.css"/>
    <link rel="stylesheet" type="text/css" href="css/media-queries.css"/>
    <link rel="stylesheet" type="text/css" href="css/topnavbar.css"/>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- JQuery Slim -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title></title>
  </head>
  <body>
    <div class="topnav">
      <a href="#">Hoja uno</a>
      <a href="displays.html">Displays</a>
    </div>
    <!-- Top content -->
    <div class="top-content">
        <!-- Carousel -->
        <div id="carousel-example" class="carousel slide" data-ride="carousel">
          <!-- Barra superior -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-1">
                    <div class="carousel-caption">
                        <h1>Primer Título</h1>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-2">
                    <div class="carousel-caption">
                        <h3>Segundo Título</h3>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/02.jpg" class="d-block w-100" alt="slide-img-3">
                    <div class="carousel-caption">
                        <h3>Tercer Título</h3>
                        <div class="carousel-caption-description">
                            <p>Texto</p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!-- End carousel -->
    </div>
  </body>
</html>

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.