Necesita la altura de la barra lateral de CSS para expandirse con el contenido

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

Pregunta

Tengo un diseño de dos columnas, con una barra lateral gris a la derecha. Necesito que la altura de la barra lateral se expanda cuando la altura de la columna izquierda aumenta (debido a que el contenido se expande dinámicamente). Puedo hacer que la barra lateral se ajuste a una página estática, pero no puedo aumentar el tamaño con el resto de la página. Hice algo de Google, pero no pude encontrar una solución que funcionó para mí.

¿Alguien sabe cómo hacer esto?

¿Fue útil?

Solución

Este es un problema común cuando se usa DIVS para este tipo de diseño.

Si buscas en Google 'Faux column' debes obtener algunas respuestas.

por ejemplo. http://www.alistapart.com/articles/fauxcolumns/

Otros consejos

Esto puede estar ligeramente apagado pero si usa jQuery en su sitio, puede realizar un cálculo rápido y cambiar el tamaño de todos los DIV que comparten una clase similar a la altura máxima: 

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

Me ha obsesionado con este problema por un tiempo y escribí un artículo sobre este problema: Hecho con columnas falsas . Esto es lo que argumenté:

  

solución basada en JavaScript para esto   El problema no es peor que cualquier otro.   solución. De hecho si estas usando   JavaScript, puede ahorrar unas horas   de frustración por tratar de conseguir cosas   trabajando. La gente te advertirá contra   esto diciendo "¿Qué pasará si   ¿El usuario ha desactivado JavaScript? ".   Créeme, si el usuario ha apagado   JavaScript, la mayor parte de la web está rota.   para el de todos modos Su barra lateral no lo hace   le importa a él.

Como mencioné anteriormente, la forma más sencilla de hacer esto es usar el código JQuery: 

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Cambié background-color al mismo color que mi barra lateral, en esa página específica, aunque tengo fondos para todas mis secciones en lugar de un fondo general. Pero eso podría no funcionar para todos.

En mi hoja de estilo, 

.sidec
{
background-color:#123456;
}

En mi página HTML, 

<body class="sidec">

content....

</body>

Hace poco vi una solución bastante creativa para este problema utilizando las propiedades CSS position: absolute y border .

Definitivamente vale la pena echarle un vistazo para ver si funciona para ti.

Enlace: http: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

No estoy seguro de si esto ayudará, ya que soy un novato. Sin embargo, cuando luchaba para que mi barra lateral mostrara todo el contenido cuando duplicaba su tamaño, hice lo siguiente. Estaba cambiando mi altura y anchura sin respuesta hasta que cambié la clase. Mi clase fue listada SB marco SB ancho. Entonces, cuando cambié mi clase para leer el ancho de SB height SB, se ajustaba a mi contenido en lugar del tamaño del marco original. También probé el ancho SB SB sb, también funcionó, pero eliminé la barra de menú de mi pie de página (lo que significa que ya no lo mostraría). Volví al ancho de SB altura SB, y todo está bien. Eso es súper duper elemental para todos ustedes, estoy seguro, pero en caso de que haya otro novato leyendo esto que no entienda mucho sobre el código html como yo ... espero que esto ayude =) Felices vacaciones a todos! abrazos, tara

Supongo que desea aplicar cierto efecto a su diseño de modo que requerirá que ambas columnas cambien de tamaño juntas. Si desea cambiar dinámicamente los valores de la altura de las columnas, dudo que funcione simplemente con css a menos que implemente algún javascript para controlar el estilo.

Como sugirió Dal, mire el enlace en las columnas falsas. Como su nombre indica, la solución no tiene mucho que ver con modificar la altura de las columnas. En su lugar, da la " ilusión " que ambas columnas parecen tener la misma altura cuando en realidad no lo son, y es con el uso de mosaicos de imagen de fondo.

La idea es que no hay necesidad de complicar el recargo. Estructura simple con un toque de " ilusión " Con imágenes es una práctica común en diseño web.

Saludos, Jonás

Con la mala actitud hacia los nuevos miembros aquí, espero que me detengan por esta respuesta, aquí va. Resolví este problema creando una imagen de fondo de 960px de ancho y 1px de alto con los dos colores que necesitaba para las columnas en sus respectivos anchos (780px y 180px). Luego utilicé esto como la imagen de fondo para mi contenedor repetida en el eje y, e hice el contenido y la barra lateral derecha color de fondo: transparente. 

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

Estoy seguro de que este método tiene sus limitaciones, pero funciona perfectamente en todas mis páginas.

Es posible que no haya explicado esto muy bien, si es así, sé amable, por favor. Me esforzaré por ampliar mi método (que probablemente ya sea de conocimiento común).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top