Obtener altura de div sin altura establecida en css

¿Hay alguna manera de obtener la altura de un elemento si no hay una regla de altura de CSS establecida para el elemento No puedo usar el método jheuery() jQuery porque necesita una regla CSS establecer primero? ¿Hay alguna otra manera de obtener la altura?Obtener altura de div sin altura establecida en css

Fuente

2012-03-06 Samuel Lopez

¿Qué te hace pensar que 'height()' necesita tener una regla css? –

'height()' obtendrá la altura calculada de los elementos ... – elclanrs

suena como si estuviera tratando de obtener la altura de algo dentro de un elemento oculto? o el elemento en sí está oculto. ¡No se puede hacer! – charlietfl

161

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

DEMO

Puede utilizar .height(), .innerHeight() o outerHeight() basan en lo que necesita.

enter image description here

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

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

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

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

Consulte a continuación el 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>

Fuente

2012-03-06 22:00:49

Sólo una nota en caso de que otros tienen el mismo problema.

Tuve el mismo problema y encontré una respuesta diferente. Encontré que obtener la altura de un div que es la 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 las imágenes se han cargado 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()); 

});

Fuente

2012-10-25 15:19:43 Iamsamstimpson

Probablemente esté obteniendo alturas extrañas porque hay más instrucciones que cambian la altura después de haberlas usado/impreso. Se recomienda solicitar alturas al final de su secuencia de comandos – Gjaa

Para mí '$ (ventana) .scroll (...)' funciona –

También asegúrese de que el div se añade actualmente a la DOM y visibles.

Fuente

2014-06-18 14:36:28

+13

Tenga en cuenta que esto podría ser más adecuado como un comentario que como una respuesta. – kkuilla

Él no habría tenido privilegios de comentario, relájate chicos. – StackOverflowed

Considero que este es un dato crucial, porque ninguna de las otras respuestas funcionará si el elemento no está adjunto al DOM, para empezar. – Guido

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 pantalla

enter image description here

Espero que esto ayude. ¡¡Gracias!!

Fuente

2014-09-06 10:56:21

Obtener altura de div sin altura establecida en css

Respuesta

Cuestiones relacionadas