jquery - scrollheight - set height javascript

jQuery.height() problema con Chrome

Question

He estado usando la función de altura jQuery. Pero hubo un problema para obtener la altura correcta de mi elemento div . La altura de este elemento div se establece en auto , lo que significa que la altura del div depende solo de los elementos que contiene. Cuando intenté usar .height() en mi página, obtuve el siguiente resultado:

Chrome: 1276 px
Firefox: 1424 px

Pero cuando los ves los dos tienen igual altura. Lo único es que la función height() devuelve un resultado diferente.

Aquí está el código:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;">
    <div>Sample Inside Element</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
     var less_height = $(''.single-mid'').height() -10;
     $(''.single-mid'').height(less_height);
});
</script>

Pero traté de establecer la altura del div en 1424px. Ambos navegadores devuelven el mismo resultado.

¿Algunas ideas? Gracias por adelantado.

Answer 1

Esto me sucedió y la razón por la cual algunas imágenes en la div que estaba calculando la altura no tenía establecido el atributo de height .

$(window).load( funcionó para mí, pero causó demasiado retraso para lo que quería hacer).

Answer 2

Parece ser causado por la diferente fuente predeterminada en los dos navegadores. Si agrega el siguiente CSS a su ejemplo, el resultado será el mismo para Firefox y Chrome / Iron:

<style type="text/css">
  div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
  }
</style>

Probablemente podría usar un restablecimiento de CSS y definir los estilos usted mismo. Esto le daría más control sobre cómo hacer que se vea igual en la mayoría de los navegadores.

Answer 3

Prueba dos métodos para fijar la altura en Chrome e IE.

jQuery(document).ready(function() {
   // your code here
});

Y

jQuery(window).load(function(){
  // your code here
}); 

Answer 4

Tenía el mismo problema. Pero si hice un breve retraso de setTimeout antes de hacer la revisión de altura, Chrome comenzó a informar la misma altura que Firefox. Parece que Chrome activa el estado de listo para el documento antes de determinar completamente cómo el contenido modificará el tamaño real del contenedor ...!? En cualquier caso, mi solución fue cambiar mi:

$(document).ready( ...

a un

$(window).load( ...

que no se dispara hasta que "todos los subelementos se hayan cargado por completo" (de http://api.jquery.com/load-event/ ).

Answer 5

Tuve el mismo problema con el menú desplegable de bootstrap: los elementos tenían que tener la altura normalizada. Para algunos menús (no todos), jquery no devolvió la altura correcta, lo que resultó en una mala normalización. Fue porque los menús desplegables estaban ocultos durante la normalización. Parece que CHROME y FIREFOX no calculan la altura correctamente cuando el elemento está oculto. IE parece funcionar mejor en este caso.

Para resolver el problema, agregué (luego elimine) la clase bootstrap "abierta" a todos los menús, para hacerlos visibles durante la normalización:

    $(window).on( "load resize orientationchange", function() {
        $(".dropdown").addClass("open");
        normalize_all();
        $(".dropdown").removeClass("open");
    });

Answer 6

Tuve el mismo problema, mientras usaba la fuente de Google Fonts y tenía implícitamente una altura de línea de 1.5em, que probablemente jQuery no vio. Una vez que escribí explícitamente line-height: 1.5em a mi restablecimiento de CSS (o configuración de fuente del sitio web), estaba bien.