Obtenir la hauteur de div sans hauteur définie en css

Existe-t-il un moyen d'obtenir la hauteur d'un élément s'il n'y a pas de règle de hauteur CSS définie pour l'élément que je ne peux pas utiliser la .height()méthode jQuery car il a d'abord besoin d'un ensemble de règles CSS? Y a-t-il un autre moyen d'obtenir la hauteur?

jQuery .heightvous renverra la hauteur de l'élément. Il n'a pas besoin de définition CSS car il détermine la hauteur calculée.

DEMO

Vous pouvez utiliser .height(), .innerHeight()ou en outerHeight()fonction de ce dont vous avez besoin.

.height() - renvoie la hauteur de l'élément excluant le remplissage, la bordure et la marge.

.innerHeight() - renvoie la hauteur de l'élément inclut le remplissage mais exclut la bordure et la marge.

.outerHeight() - renvoie la hauteur du div, bordure comprise, mais exclut la marge.

.outerHeight(true) - renvoie la hauteur du div avec la marge.

Consultez l'extrait de code ci-dessous pour une démonstration en direct. :)

$(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>

Juste une note au cas où d'autres auraient le même problème.

J'ai eu le même problème et j'ai trouvé une réponse différente. J'ai trouvé que l'obtention de la hauteur d'un div dont la hauteur est déterminée par son contenu doit être lancée sur window.load , ou window.scroll not document.ready sinon j'obtiens des hauteurs étranges / des hauteurs plus petites, c'est-à-dire avant le chargement des images. J'ai également utilisé externalHeight () .

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

});

Peut faire cela dans jQuery . Essayez toutes les options .height(), .innerHeight()ou .outerHeight().

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

Exemple de capture d'écran

J'espère que cela t'aides. Merci!!

Assurez-vous également que le div est actuellement ajouté au DOM et visible .