jquery - obtener - Obtenga la altura de div sin altura establecida en css

outerheight javascript

Question

¿Hay alguna manera de obtener la altura de un elemento si no hay una regla de altura CSS para el elemento No puedo usar el método jheuery () jQuery porque primero necesita un conjunto de reglas CSS? ¿Hay alguna otra manera de obtener la altura?

Answer 1

Puede hacer esto en jQuery . Pruebe todas las opciones .height() , .innerHeight() o .outerHeight() .

$(''document'').ready(function() {
    $(''#right_div'').css({''height'': $(''#left_div'').innerHeight()});
});

Ejemplo de captura de pantalla

Espero que esto ayude. ¡¡Gracias!!

Answer 2

También asegúrese de que el div esté actualmente anexado al DOM y visible .

Answer 3

jQuery .height te devolverá la altura del elemento. No necesita definición de CSS ya que determina la altura calculada.

DEMO

Puede usar .height() , .innerHeight() o outerHeight() según lo que necesite.

.height() - devuelve la altura del elemento excluye relleno, borde y margen.

.innerHeight() - devuelve la altura del elemento incluye relleno pero excluye borde y margen.

.outerHeight() - devuelve la altura del div incluyendo el borde pero excluye el margen.

.outerHeight(true) - devuelve el alto del div incluyendo el margen.

Verifique el siguiente fragmento de código para la demostración en vivo. :)

$(function() {
  var $heightTest = $(''#heightTest'');
  $heightTest.html(''Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"'')
    .append(''<p>Height (.height() returns) : '' + $heightTest.height() + '' [Just Height]</p>'')
    .append(''<p>Inner Height (.innerHeight() returns): '' + $heightTest.innerHeight() + '' [Height + Padding (without border)]</p>'')
    .append(''<p>Outer Height (.outerHeight() returns): '' + $heightTest.outerHeight() + '' [Height + Padding + Border]</p>'')
    .append(''<p>Outer Height (.outerHeight(true) returns): '' + $heightTest.outerHeight(true) + '' [Height + Padding + Border + Margin]</p>'')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

Answer 4

Solo una nota en caso de que otros tengan el mismo problema.

Tuve el mismo problema y encontré una respuesta diferente. Encontré que obtener la altura de un div que es altura está determinada por su contenido debe iniciarse en window.load , o window.scroll no document.ready; de lo contrario, obtengo alturas impares / alturas más pequeñas, es decir, antes de que se carguen las imágenes. También utilicé outerHeight () .

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $(''#js_content_container'').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});