¿Cómo puedo extender mi barra lateral a lo largo de toda la página?

He visto otras soluciones, sin embargo, no me funcionan. Probé la altura: 100% en mi barra lateral y todavía no funciona. ¿Podría alguien señalarme en la dirección correcta? Me gustaría que el color de la barra lateral se extienda a lo largo de toda la página.¿Cómo puedo extender mi barra lateral a lo largo de toda la página?

2012-10-02 Lindsay

respuesta rápida es que "no se puede" porque la altura se supone que cambia dependiendo del tamaño del contenido, por lo que no podrá establecer una altura fija en cualquier lugar para hacer el 100% de nada que no es nada. Para resolver esto, debe usar el pequeño javascript – Onheiron

. Sería una buena práctica publicar el código directamente en la pregunta, y no solo los enlaces. Ahora, si quisiera ayudar, tengo que rastrear 2 archivos y buscar filas específicas, en lugar de señalarlos. – Tom

Ok voy a tratar de explicar poco más aquí:

Al configurar altura: 100%; en CSS, tiene que preguntarse - "¿100% de qué?" - ... Bueno, esto depende de cómo se establece la posición del elemento. Cuando establece posición: absoluta; entonces sería 100% de la vista del navegador del usuario de lo contrario sería 100% de la altura principal del elemento. Por lo tanto, si no está configurando una altura adecuada o una posición absoluta en algún lugar, obtendrá el 100% de nada que no es nada (que retrocede a la altura predeterminada ajustada por contenido).
así que vamos por un momento considerar hacer posición de div padre absoluta y fijándolo en altura 100% (para que su hijos barra lateral en posición relativa obtendrá la misma altura, si su altura se ajusta al 100%). HERE A FIDDLE - Ahora veamos qué tenemos: tenemos un div principal (amarillo) tan alto como la vista del navegador del usuario, pero su altura es fija y no cambiará para ajustarse al contenido, entonces tenemos una barra lateral (roja) que coincide con su la altura de los padres (por lo tanto, su altura no se ajustará al contenido), finalmente tenemos un texto de contenido largo (bg transparente) que se solapa claramente con la altura del div principal y aterriza en el medio de la nada. No es bueno ...
¿Qué podemos hacer? (doesn't seem setting parent's overflow to scroll is a good idea) ... tenemos que ver el problema de la manera correcta: básicamente tienes dos divs hermanos y quieres que se ajusten bien a su altura de contenido, pero al mismo tiempo quieres que uno de ellos mantenga la misma altura de su hermano -> no hay soluciones de CSS fáciles para eso (que yo sepa).
Finalmente mi sugerencia es usar un poco de jquery: here a fast setup y here the full site. Ahora solo escriba:
```
var height = $('.content').height() 
$('.sidebar').height(height) 
```
and it'll work just fine. Observe que dejé la posición absoluta para el elemento principal y la configuré al 100% de altura, pero no configuré ninguna altura para la barra lateral que ahora coincide exactamente con el tamaño real del panel de contenido.

Esperanza esto ayuda

Fuente

2012-10-02 19:47:41 Onheiron

Muchas gracias m uch para esta explicación! Fue extremadamente útil. – Lindsay

¡eres bienvenido! – Onheiron

height:100% debería funcionar bien, pero hay que asegurarse de que hace el div que contiene 100% también.

#main-content { 
    background: url("../images/diagonal-noise.png"); 
} 
#content { 
    background-color: #FEFEFE; 
    width: 920px; 
    margin-left: auto; 
    margin-right: auto; 
    border-left: 25px solid #79879E; 
    border-right: 25px solid #79879E; 
    padding: 20px; 
    height:100%; 
} 
#secondary-content { 
    background-color: #CED6E2; 
    width: 200px; 
    float: left; 
    border-right: 1px dotted #79879E; 
    padding: 10px; 
    margin: 10px 20px 10px -20px; 
    height:100%; 
}

Fuente

2012-10-02 19:05:49 Jason

Por alguna razón, todavía no está funcionando. :( – Lindsay

Es posible que tenga que usar algo como [Faux Columns] (http://www.alistapart.com/articles/fauxcolumns/) trampa para hacer que funcione – Jason

no funcionará hombre, o al menos no que bueno ... http://jsfiddle.net/MLsN5/1/ en el violín puedes ver que necesitas establecer la posición absoluta en div de los padres y también esto hace que la altura de los padres sea fija y no se ajuste a la altura del contenido ... Si está interesado en probarlo, publique un violín con eso. El problema aquí es que quiere que la barra lateral se ajuste a la altura de su hermano, no a la del padre – Onheiron

@Onheiron, su trabajo era muy útil. ¡Gracias!

Agregué una línea a mi código porque noté que las páginas de contenido corto no se extendían hasta el final de la página y la barra lateral también se quedaba corta. Ahora el script verifica qué (un contenido o cuerpo) tiene una altura mayor y luego aplica la misma altura al .sidebar.

HTML:

<body> 
    <div class="sidebar"></div> 
    <div class="content"></div> 
</body>

JavaScript:

$(document).ready(function() { 
    var height1 = $('.content').height() 
    var height2 = $('body').height() 

    if (height1 > height2) { 
     $('.sidebar').height(height1) 
    } else { 
     $('.sidebar').height(height2) 
    } 
});

CSS:

body, .sidebar { 
    height:100% 
}

Entonces pierden la parte de los demás la instrucción if, ya que por defecto será css. No es necesario el script si el área .content tiene una altura menor que el cuerpo.

Fuente

2012-10-25 06:02:45

Esto es realmente bastante simple si usa Bootstrap v3 o superior.

.sidebar { 
    background-color: lightgrey; 
    position: fixed; 
    bottom: 0; 
}

Presto!

Fuente

2018-01-12 21:31:08 bloodrootfc

¿Cómo puedo extender mi barra lateral a lo largo de toda la página?

Respuesta

Cuestiones relacionadas