Establecer una altura DIV igual a la de otro DIV

Question

Tengo dos DIVs, .sidebar y .content y deseo establecer .sidebar para mantener la misma altura que el .content.

He intentado lo siguiente:

$(".sidebar").css({'height':($(".content").height()+'px'}); 

$(".sidebar").height($(".content").height()); 

var highestCol = Math.max($('.sidebar').height(),$('.content').height()); 
$('.sidebar').height(highestCol); 

Ninguno de ellos están trabajando. Para el .content no tengo ninguna altura, ya que aumentará o disminuirá en función del contenido.

Por favor, ayúdame. Tengo que terminar una página web hoy y esto (simple) me está dando dolores de cabeza.

Gracias!

Answer 1

Creo que lo que estás buscando es faux columns.

Answer 2

En mi experiencia, es una muy, muy mala idea usar Javascript para este tipo de cosas. La web debe ser semántica. No es siempre, pero debería. Javascript es para funcionalidad interactiva. HTML es para contenido. CSS es para el diseño. PUEDES usar uno para el propósito del otro, pero solo porque PUEDES hacer algo no significa que DEBERÍAS.

En cuanto a su problema específicamente, la respuesta breve es: no estirar la barra lateral. No es necesario. Configura un fondo que se parece a su barra lateral y lo deja parecer una columna. Es, como dijo Victor Welling, una falsa columna.

Aquí es una de las muchas páginas web que muestran cómo hacerlo:

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

Pero recurrir a Javascript para ese tipo de problema de presentación sería "malo", incluso si funcionaba.

Answer 3

eje211 tiene un punto sobre el uso de CSS para dar estilo a su página. Aquí hay dos métodos para utilizar CSS, y un método que utiliza secuencias de comandos para lograr esto:

1. Este artículo hace alturas de columna igual without CSS hacks.

2. Aquí hay un método para obtener alturas de columna iguales using a CSS hack.

3. y, por último, si desea utilizar javascript/jQuery, puede utilizar la secuencia de ecualización de alturas que la página jQuery .map() tiene como demostración.

   $.fn.equalizeHeights = function(){ 
       return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get())) 
   } 
   

   continuación, sólo tiene que utilizar la siguiente manera:

   $('.sidebar, .content').equalizeHeights(); 
   

Answer 4

La razón por la que su primer ejemplo no funciona es debido a un error tipográfico:

$(".sidebar").css({'height':($(".content").height()+'px'}); 

debería ser en realidad

$(".sidebar").css({'height':($(".content").height()+'px')}); 

le falta un soporte posterior antes del selector .content.

Answer 5

Utilicé esta técnica para forzar al elemento de pie de página a permanecer en la parte inferior de la página según la altura de otro elemento. En tu caso lo harías; obtener barras laterales y divs de contenido para mantener la misma altura puede hacer lo siguiente.

1. Obtener la altura de la div principal; Supongo que es el div .content; y asignarlo a una variable.

   var setHeight = $(".content").height();

2. entonces se puede usar jQuery para obtener la barra lateral y asignar la altura del contenido utilizando la variable.

   $(".sidebar").height(setHeight);

Es tan simple como eso. El código final se verá así.

`var setHeight = $(".content").height();` 
`$(".sidebar").height(setHeight);` 

Here are more examples. Ajuste la altura del div con jQuery (estiramiento altura div).

Answer 6

funciona como un encanto:

function sidebarHandler() { 
    jQuery(".sidebar").css({'height':(jQuery(".content").height()+'px')}); 
    jQuery(".sidebar").height(jQuery(".content").height()); 
    var highestCol = Math.max(jQuery('.sidebar').height(),jQuery('.content').height()); 
    jQuery('.sidebar').height(highestCol); 
} 

inicializarlo con todo su otra materia jQuery:

jQuery(document).ready(function() { 
    sidebarHandler(); 
}); 

Answer 7

$(window).resize(function(){ 
 
    var height = $('.child').height(); 
 
    $('.parent').height(height); 
 
}) 
 

 
$(window).resize(); //on page load

.parent{ 
 
    background:#ccc; 
 
    display:inline-block; 
 
    width:100%; 
 
    min-height:100px; 
 
} 
 
.child{ 
 
    background:red; 
 
    width:50%; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute 
 
    </div> 
 
</div>