obtener - set height jquery

Establecer una altura DIV igual a la de otro DIV

Question

Tengo dos DIV, .sidebar y .content y quiero configurar .sidebar para mantener la misma altura con 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 estos está funcionando. Para el .content no tengo ninguna altura, ya que aumentará o disminuirá según el 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 http://www.alistapart.com/articles/fauxcolumns/ .

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 la funcionalidad interactiva. HTML es para el contenido. CSS es para el diseño. PUEDE usar uno para el propósito del otro, pero solo porque PUEDE hacer algo no significa que DEBE hacerlo.

En cuanto a su problema específicamente, la respuesta corta es: no estira la barra lateral. Usted no tiene que hacerlo Configura un fondo que se parece a la barra lateral y deja que se vea como una columna. Es, como lo dijo Victor Welling, una columna falsa.

Aquí hay 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 "incorrecto" incluso si funcionara.

Answer 3

Funciona de maravilla:

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);
}

Inicialízalo con todas tus otras cosas de jQuery:

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

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''});

en realidad debería ser

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

le falta un soporte de arrastre anterior al selector de contenido.

Answer 5

Utilicé esta técnica para forzar que el elemento del pie de página permanezca en la parte inferior de la página según la altura de otro elemento. En tu caso lo harías; obtener barra lateral y divs de contenido para mantener la misma altura puede hacer lo siguiente.

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

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

2. luego puede usar jQuery para obtener la barra lateral y asignar la altura del contenido usando la variable.

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

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

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

Aquí hay más ejemplos. Ajuste la altura div usando jquery (altura div divina).

Answer 6

eje211 tiene un punto sobre el uso de CSS para estilizar tu página. Aquí hay dos métodos para usar CSS y un método que usa secuencias de comandos para lograr esto:

1. Este artículo hace alturas de columna iguales sin hacks CSS .

2. Aquí hay un método para obtener alturas de columna iguales utilizando un truco de CSS .

3. y, por último, si desea usar javascript / jQuery, puede usar el script de igualació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() ) )
   }

   entonces solo úselo de la siguiente manera:

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

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>