1

Estoy haciendo una página web en Boostrap y quiero que en la página de inicio (home) el contenido se adapte al tamaño de la pantalla, es decir que no haya ni scroll vertical ni horizontal.

¿Cómo puedo hacer para quitarlo?

Éste es mi código:

html, body, .container-fluid {
  height: 100%;
}

.direccion {
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }

  .sidebar-nav .navbar ul {
    float: none;
  }

  .sidebar-nav .navbar ul:not {
    display: block;
  }

  .sidebar-nav .navbar li {
    float:none;
    display: block;
  }

  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo_menu {
    width: 50%;
    margin: 0 auto;
  }
}

.rrss {
  margin-left: 5%;
}

.col-sm-2 {
  padding-right:0; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-2">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!--<span class="visible-xs navbar-brand">Sidebar menu</span>-->
        </div>
        <a href="index.html"><img class="img-responsive logo_menu" src="http://placehold.it/200x200" alt="logo home"/></a>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Quienes somos</a></li>
            <li><a href="#">Que hacemos</a></li>
            <li><a href="#">Quiero trabajar</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Noticias</a></li>
          </ul><br/>

          <div class="rrss">
            <a href="#"><img src="images/facebook.png" width="10%" alt="facebook"/></a>&nbsp;
            <a href="#"><img src="images/twitter.png" width="10%" alt="twitter"/></a>
            <!--<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>&nbsp;
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>-->
          </div><br/>

          <div class="direccion rrss">
            <p>Dirección de la empresa</p>
            <!--<p>@2016 Sabrina Couto. All rights reserved.</p>-->
          </div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>


  <div class="container-fluid">
    <div class="col-sm-10">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://placehold.it/2000x900/ff0000" alt="Chania">
            <div class="carousel-caption">
              <h1>Innovación y desarrollo de nuevas técnicas de ventas</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/00ff00" alt="Chania">
            <div class="carousel-caption">
              <h1>Formamos a toda nuestra gente desde la base</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/0000ff" alt="Flower">
            <div class="carousel-caption">
              <h1>Profesionalidad, calidad y experiencia en ventas</h1>
            </div>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

5
  • Ajustar el ancho no es ningún problema porque los elementos caen hacia abajo si no tienen sitio pero la altura ya es otro tema. Si el contenido es mayor que la altura del navegador no puedes hacer nada, si quitas el scroll no podrás ver todo contenido.
    – user7176
    el 27 jul. 2016 a las 12:04
  • 1
    @Sabrina ¿Lo que quieres es que todo el contenido entre dentro del viewport?
    – Alvaro Montoro
    el 27 jul. 2016 a las 12:14
  • Si, lo que quiero es que todos los elementos entren dentro del viewport sin importar que tamaño de pantalla sea. El scroll lateral ya lo arreglé con el row-fluid que me dijo The great stimpy pero me queda el scroll vertical.
    – Sabrina
    el 27 jul. 2016 a las 13:54
  • @Sabrina pero eso no es posible si hay mucho contenido, ¿si no cabe a dónde va el contenido? no puede fluir como en horizontal. Puedes intentar hacer el contenido y los textos más pequeño cuando redimensionas pero es complicado y quizá no sea práctico ni legible
    – user7176
    el 27 jul. 2016 a las 18:01
  • @blonfu ah vale, bueno entonces lo ajustaré un poco para las pantallas de pc y ya está. Muchas gracias!
    – Sabrina
    el 29 jul. 2016 a las 5:43

3 respuestas 3

3

Agrega row-fluid en vez de usar row para anchos de 100%

html, body, .container-fluid {
  height: 100%;
}

.direccion {
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }

  .sidebar-nav .navbar ul {
    float: none;
  }

  .sidebar-nav .navbar ul:not {
    display: block;
  }

  .sidebar-nav .navbar li {
    float:none;
    display: block;
  }

  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo_menu {
    width: 50%;
    margin: 0 auto;
  }
}

.rrss {
  margin-left: 5%;
}

.col-sm-2 {
  padding-right:0; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row-fluid">
  <div class="col-sm-2">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!--<span class="visible-xs navbar-brand">Sidebar menu</span>-->
        </div>
        <a href="index.html"><img class="img-responsive logo_menu" src="http://placehold.it/200x200" alt="logo home"/></a>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Quienes somos</a></li>
            <li><a href="#">Que hacemos</a></li>
            <li><a href="#">Quiero trabajar</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Noticias</a></li>
          </ul><br/>

          <div class="rrss">
            <a href="#"><img src="images/facebook.png" width="10%" alt="facebook"/></a>&nbsp;
            <a href="#"><img src="images/twitter.png" width="10%" alt="twitter"/></a>
            <!--<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>&nbsp;
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>-->
          </div><br/>

          <div class="direccion rrss">
            <p>Dirección de la empresa</p>
            <!--<p>@2016 Sabrina Couto. All rights reserved.</p>-->
          </div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>


  <div class="container-fluid">
    <div class="col-sm-10">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://placehold.it/2000x900/ff0000" alt="Chania">
            <div class="carousel-caption">
              <h1>Innovación y desarrollo de nuevas técnicas de ventas</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/00ff00" alt="Chania">
            <div class="carousel-caption">
              <h1>Formamos a toda nuestra gente desde la base</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/0000ff" alt="Flower">
            <div class="carousel-caption">
              <h1>Profesionalidad, calidad y experiencia en ventas</h1>
            </div>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

1
  • Gracias, con el row-fluid se eliminó el scroll lateral
    – Sabrina
    el 27 jul. 2016 a las 13:52
1

Yo resolví poniendo en el elemnto que quería quitar el scroll: overflow-x: hidden;

-1

Añádele width: 100% al elemento que te está generando el scroll.

3
  • Se lo añadí al body pero no funciona :/ y es lo que está generando el scroll.
    – Sabrina
    el 27 jul. 2016 a las 12:07
  • Todos los elementos están ajustados al tamaño de la pantalla? Si algún elemento sobre pasa ese height se mostrará el scroll automáticamente.
    – dbmdlr
    el 27 jul. 2016 a las 12:57
  • Pero yo lo que quiero es que se ajuste a todas las pantallas. Si a los elementos les pongo un height determinado para una pantalla determinada, cuando la pantalla sea más pequeña habrá scroll igualmente.
    – Sabrina
    el 27 jul. 2016 a las 13:55

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.