Obtenga la altura de div sin altura establecida en css

90

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

Samuel Lopez
fuente
2
¿Qué te hace pensar que es height()necesario tener una regla CSS?
James Montagne
height()obtendrá la altura calculada de los elementos ...
elclanrs
1
suena como si estuvieras tratando de obtener la altura de algo dentro de un elemento oculto? o el elemento mismo está oculto. ¡No se puede hacer!
charlietfl
Incluya su código porque no es necesario heighttener css configurado. Ese enlace no tiene nada que ver con jquery.
James Montagne
¡Ese enlace "insight" tiene 7 años!
charlietfl

Respuestas:

220

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

MANIFESTACIÓN

Se puede utilizar .height(), .innerHeight()o outerHeight()sobre la base de lo que necesita.

ingrese la descripción de la imagen aquí

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

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

.outerHeight() : devuelve la altura del div incluido el borde pero excluye el margen.

.outerHeight(true) - devuelve la altura del div incluido el margen.

Consulte el siguiente fragmento de código para ver una 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>

Selvakumar Arumugam
fuente
37

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

Tuve el mismo problema y encontré una respuesta diferente. Descubrí que obtener la altura de un div cuya 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 usé 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());   

});
Iamsamstimpson
fuente
1
Probablemente esté obteniendo alturas extrañas porque hay más instrucciones que cambian la altura después de haberlas usado / impreso. Se recomienda pedir alturas al final de su guión
Gjaa
10

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

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

Captura de pantalla de ejemplo

ingrese la descripción de la imagen aquí

Espero que esto ayude. ¡¡Gracias!!

Madan Sapkota
fuente
8

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

Tom Scholes
fuente
13
Tenga en cuenta que esto podría ser más adecuado como comentario que como respuesta.
kkuilla
4
No habría tenido privilegios para comentar, tranquilos chicos.
StackOverflowed
3
Considero que esta es una información crucial, porque ninguna de las otras respuestas funcionará si el elemento no está adjunto al DOM para empezar.
Guido