0

Quisiera que el fondo gris llegue hasta abajo.

body,html{
    height: 100%;
  }

  nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }

    nav.sidebar:hover + .main{
      margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

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

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  }
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    
    <div class="col-sm-3 col-md-2" id="menu1">
    <nav class="navbar navbar-default sidebar" role="navigation">
        <div class="container-fluid">
        <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>
          <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> MENÚ</a>      
        </div>
        <div class="collapse navbar-collapse" id="sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Menu 1<span class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2<span class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
              <ul class="dropdown-menu forAnimate" role="menu">
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
              </ul>
            </li>

            <li><a href="#">Menu 2<span class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>        
            <li><a href="#">Menu 3<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 4<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 5<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 6<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 7<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 8<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>

          </ul>
        </div>
      </div>
    </nav>
</div>
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civ</p>
</div>    
    

    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

introducir la descripción de la imagen aquí

2
  • ¿Podrías crear un ejemplo ejecutable? el 12 dic. 2016 a las 18:39
  • nav.sidebar { height: 100vh; } la propiedad vh toma el alto del viewport como referencia el 24 nov. 2020 a las 16:51

2 respuestas 2

1

Para resolverlo podrías usar CSS3 Flexbox (compatibilidad IE10+)

Por ejemplo:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: left;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
  order: 4;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  flex: 3 0px;
  order: 2;
}

.aside-1 {
  background: gold;
  flex: 1 auto;
  order: 1;
}

.aside-2 {
  background: hotpink;
  flex: 1 auto;
  order: 3;
}

body {
  padding: 2em; 
}
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  </article>
  <aside class="aside-1">Aside 1</aside>
  <aside class="aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

Mas info: Flexbox guide

1

Intenta agregar lo siguiente dentro del nav.sidebar { }

min-height: 100% !important!;

Lo sustituyes por el height que tienes ahí.

2
  • Hector, donde agregar? el 12 dic. 2016 a las 17:57
  • Dentro del nav.sidebar { } lo sustituyes por el height que tienes ahi el 12 dic. 2016 a las 18:33

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.