1

se que muchos conocen SB Admin 2, estoy haciendo algo similar pero tengo una duda con lo referente a como poner el Navbar a la izquierda que tome el 100% del alto de la pagina como lo hace un aside; tal cual esta en la imagen: introducir la descripción de la imagen aquí

Por favor tener en cuenta que también quiero el Navbar en la parte superior de la pagina.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="<?php echo RUTA;?>/css/bootstrap.min.css">
        <link rel="stylesheet" href="<?php echo RUTA;?>/css/style.css">
        <script src="<?php echo RUTA;?>/js/jquery.min.js"></script>
        <script src="<?php echo RUTA;?>/js/bootstrap.min.js"></script>
        <title>Login BoardRoster</title>
    </head>
    <body>


      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
              <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="<?php echo RUTA; ?>"><img src="<?php echo RUTA; ?>/img/logo.png" alt="Nomina - OldMutual">
            </a>
          </div>
          <div id="menu" class="navbar-collapse collapse">
            <ul class="nav navbar-nav  navbar-right">
              <li class=""><a href="#">Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
      </nav>

      <nav style="width: 20%;" class="navbar navbar-default">
        <div class="container-fluid">
          <div id="menu" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="#">Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
      </nav>
            <h1>Testing</h1>
</body>
</html>

Quiero hacerlo similar o igual a Sb Admin 2, que el menú o navbar ubicado a la izquierda ocupe el 100% del alto de la pagina, y que en el centro o div.container se pueda poner el contenido de la web.

5
  • Agrega la estructura de tu página, por favor. La solución más simple, parece ser colocar el contenido que incluye la navbar y el aside en columnas, pero debes mostrar como usas tu container.
    – toledano
    Commented el 27 feb. 2017 a las 15:54
  • hola lo quiero hacer de la siguiente manera blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/… similar o igual a sb admin 2
    – ByGroxD
    Commented el 27 feb. 2017 a las 15:56
  • Por favor ByGroxD, edita tu pregunta siguiendo esta guía: ejemplo mínimo verificable. Te invito a que evites en la medida de lo posible el uso de imágenes y que incluyas todo la información necesaria en la pregunta, de modo que no haya necesidad de consultar enlaces externos. Es importante saber, en que punto se encuentra tu código en este momento y qué problema estás enfrentado.
    – toledano
    Commented el 27 feb. 2017 a las 15:58
  • se subio el codigo fuente
    – ByGroxD
    Commented el 27 feb. 2017 a las 16:09
  • por lo que he podido ver del código de la web que estás dando como ejemplo, es que el div que contiene toda la página tiene un color de fondo, tiene el navbar superior, uno lateral (que no ocupa el 100%) y luego el contenido de toda la web en el container de la derecha con otro color de fondo, entonces si este último crece, da la ilusión de que el navbar lateral ocupa el 100%, cuando no lo es.
    – Zander
    Commented el 28 feb. 2017 a las 8:53

3 respuestas 3

1

Puedes usar flex box para lo que intentas conseguir, teniendo en cuenta que el aside y el container tienen que tener la misma altura y como mínimo el 100%, con el siguiente ejemplo te serviria:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     html,body {margin: 0;padding: 0}
    .menu-principal {width: 100%; height: 50px; background: red}
    .caja-flex {display:flex; min-height: calc(100vh - 50px)}
    .aside {width: 20%; background: #ccc}
    .container {width: auto; background: orange}
  </style>
</head>
<body>
  <nav class="menu-principal"></nav>
  <div class="caja-flex">
    <nav class="aside"></nav>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae nobis voluptatum placeat nisi reiciendis impedit voluptates, minima quam cumque, sit aut dignissimos est et a, ad asperiores repellat ab.</p>
   </div>
  </div>
</body>
</html>

Se puede ver el ejemplo ejecutandose en codepen:

http://codepen.io/fantsal-academy/pen/BWoQpZ

0

si agregas lo siguiente en tu hoja de estilos:

html,body,.side-nav{
  height: 100%;
}
<nav style="width: 20%;" class="side-nav navbar navbar-default">

Al segundo nav que es el de la izquierda le agregas solo la clase side-nav así tomará la altura de toda la página.

1
  • hola gracias por responder, funciona pero no me toma el 100% del alto de la pagina, sigo creado etiquetas <br> para probar y me muestra el borde del nav cuando bajo el scroll
    – ByGroxD
    Commented el 27 feb. 2017 a las 16:41
0

Cambia la unidad de porcentaje a view height. (vh) y tomará el tamaño del alto de ventana

.side-nav{ height: 100vh; }

Esa unidad funciona con el viewport y toma las medidas de la ventana o dispositivo.

Tambien lo que quieres es que no se recorra con la página debes añadir la propiedad position:fixed para que siga es su posición durante el scroll

1
  • Hola Signo, bienvenido. Se que no puedes publicar comentarios pero no por ello puedes publicar respuestas de baja calidad. Ten paciencia hasta los 50 rep. Un saludo
    – lois6b
    Commented el 28 feb. 2017 a las 8:35

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.