Skip to main content
título editado
Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Porque ¿Por qué mi sidebar no va hasta el fondo del sitio?

se añadieron 1806 caracteres en el cuerpo
Origen Enlace

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

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>

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

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

Origen Enlace

Porque mi sidebar no va hasta el fondo del sitio?

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>

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