0

Quiero que mi sidebar tenga un height del 100% pero se queda por la mitad de la pagina, porque sera?

Sidebar CSS

nav.sidebar{
  width: 200px;
  height: 100%;
  margin-left: -160px;
  float: left;
  margin-bottom: 0px;
}

Content CSS

.content{
     padding: 10px 10px 0 10px;
     float: center;
}

HTML

<LateralMenu />
<div className="content">
<center>
<div className="c--anim-btn">
  <span className="c-anim-btn">
    <div className="logo-home" dangerouslySetInnerHTML={{ __html: xxxxlogo }}/>
  </span>
  <span>
     xxxxx
  </span>
</div>
<hr width="50%"/>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
</center>
</div>

Sidebar HTML

<nav className="navbar navbar-default sidebar" role="navigation">
    <div className="container-fluid">
    <div className="navbar-header">
      <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
        <span className="sr-only">Toggle navigation</span>
        <span className="icon-bar"></span>
        <span className="icon-bar"></span>
        <span claclassNamess="icon-bar"></span>
      </button>      
    </div>
    <div className="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
      <ul className="nav navbar-nav">
        <li className="hvr-wobble-horizontal"><a href="/">Home<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
        <li className="hvr-wobble-horizontal"><a href="/demos">Demos<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
        <li className="hvr-wobble-horizontal"><a href="/categories">Categories<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>   
        <li className="hvr-wobble-horizontal"><a href="/users">Users<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>                
        <li className="hvr-wobble-horizontal"><a href="/logout">Logout<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-log-out"></span></a></li>
      </ul>
    </div>
  </div>

</nav>

PD: Estoy usando ReactJS por eso el <lateralmenu / > pero es como si fuera un simple <div> con el sidebar

4
  • Coloca el HTML del sidebar también. ¿Quieres que la parte donde va el contenido sea scrollable?
    – gugadev
    Commented el 17 ene. 2017 a las 18:08
  • Ahi lo agregue, quiero que digamos el largo de el menu abarque toda la pagina osea que llegue hasta el bottom. Commented el 17 ene. 2017 a las 18:19
  • ¿Podrías copiar el HTML resultante en lugar de cada parte por separado?
    – Marcos
    Commented el 17 ene. 2017 a las 18:51
  • Santiago, ¿tu aplicación tiene el diseño de un dashboard?
    – gugadev
    Commented el 17 ene. 2017 a las 18:57

2 respuestas 2

3

Para que un elemento coja el 100% de la altura del contenedor, ese contenedor debe tener una altura definida; si lo que quieres es que ese contenedor tenga también un 100% el padre de éste debe tener altura igualmente, así hasta llegar a la etiqueta html, todos los elementos que se vayan anidando hasta llegar al sidebar deben tener una altura de 100%:

html, body{
  height: 100%;
} 

Otra opción es usar la unidad vh que toma la altura de la pantalla:

.sidebar{
  height: 100vh;
}
1
  • La segunda opcion me funciono perfectamente, gracias :) Commented el 17 ene. 2017 a las 19:00
2

La solución de @blonfu funciona pefrecto. Pero si tu aplicación es un más dashboard, que es lo que parece, yo te recomiendo hacer dos cosas además de lo que ya te mencionaron:

  1. El sidebar y el content debe tener un height: 100%.
  2. El contenedor no debe ser scrollable. En su lugar, debe serlo el content.

Es una manera de mantener una buena UX, porque el usuario, jamás va a perder de vista las áreas importantes, como son el menú y la barra superior donde va el menú de usuario (perfil, cerrar sesión, etc.).

Te pongo un ejemplo

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.container .sidebar {
  background-color: #34495e;
  flex: 0 0 250px;
  height: 100%;
  transition: all .23s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.container .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.container .content .top {
  background-color: #fff;
  flex: 0 0 50px;
}

.container .content .main {
  background-color: #F2F8FA;
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

#box {
  background-color: coral;
  border-radius: 3px;
  height: 1500px;
  margin: 0 auto;
  width: 150px;
}

@media screen and (max-width: 850px) {
  .container .sidebar {
    flex: 0 0 70px;
  }
}
<section class="container">
  <aside class="sidebar">
    
  </aside>
  <section class="content">
    <header class="top">
      
    </header>
    <article class="main">
       <div id="box"></div>
    </article>
  </section>
</section>

2

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.