responsive-design - example - sidebar bootstrap 4 template

bootstrap 3.0 barra lateral de cuerpo entero

Question

Estoy tratando de hacer que los divs bootstrap sean de cuerpo entero.

Esto es lo que he intentado hasta ahora: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

A medida que la columna de la derecha crece, quiero que la barra lateral haga lo mismo.

Answer 1

La clave es entender los estilos "col-md-x" y "col-md-offset-x" proporcionados por Bootstrap 3:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

Luego usa CSS para asegurarte de que los puntos de ruptura estén alineados. Tendrá que ajustar el relleno / margen para sus necesidades particulares, pero los puntos de interrupción offset y @media manejan el diseño general bastante bien:

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

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

Solución de trabajo: http://www.bootply.com/111837

Si usas "col-sm-x" o "col-lg-x", simplemente cambias el @media CSS al ancho mínimo correspondiente (768px para sm y 1200px para lg). Bootstrap se encarga del resto.

Answer 2

Lo único que funcionó para mí (después de muchas horas de intentarlo todo) fue

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

El relleno en porcentaje lo hizo por mí. Ahora va hasta el final de la página.

Answer 3

Resolví esto usando un div absolutamente posicionado y un poco de jQuery. Tengo una barra de navegación de Bootstrap con una altura fija de 50px, por lo que está viendo los 50 en el código. Puedes eliminar esto si no tienes una barra de navegación superior.

Esta solución funciona dinámicamente con cualquier altura.

El CSS:

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

La jQuery:

var document_height = $(document).height();
var sidebar = $(''.sidebar'');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css(''height'', document_height - 50);
}

Lo bueno de esto es que no habrá parpadeo del fondo porque se usa CSS para ajustar la altura mínima, de modo que el cambio de tamaño de jQuery que normalmente causa un parpadeo del fondo se ocultará en la carga de la página.

Answer 4

enfoque 1: se agregó div vacía con estilo = "borrar: ambos" al final de la envoltura div. http://jsfiddle.net/34Fc5/1/

approch 2: http://jsfiddle.net/34Fc5/ :

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

añadido "desbordamiento: oculto;" a .wrap altura cambiada: 100% a html, cuerpo cambió altura: 100% a .sidebar

utilizando la forma css, la altura de la barra lateral solo coincidirá con el puerto de vista del navegador. por lo tanto, si observa el enfoque 1, cuando se desplace notará que el fondo se detiene en la ventana gráfica. Para arreglarlo se requiere js.