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


90

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?


2
Qu'est-ce qui vous fait penser height()qu'il faut une règle css?
James Montagne

height()obtiendra la hauteur calculée des éléments ...
elclanrs

1
on dirait que vous essayez d'obtenir la hauteur de quelque chose à l'intérieur d'un élément caché? ou l'élément lui-même est masqué. Ne peut faire!
charlietfl

Incluez votre code car il n'est pas nécessaire de heightdéfinir le CSS. Ce lien n'a rien à voir avec jquery.
James Montagne

ce lien "insight" a 7 ans!
charlietfl

Réponses:


220

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.

entrez la description de l'image ici

.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>


37

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

});

1
Vous obtenez probablement des hauteurs étranges car il y a plus d'instructions qui changent la hauteur après les avoir utilisées / imprimées. Il est recommandé de demander des hauteurs à la fin de votre script
Gjaa

10

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

entrez la description de l'image ici

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


8

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


13
Veuillez noter que cela pourrait me convenir davantage comme commentaire que comme réponse.
kkuilla

4
Il n'aurait pas eu de privilèges de commentaire, détendez-vous les gars.
StackOverflowed

3
Je considère cela comme une information cruciale, car aucune des autres réponses ne fonctionnera si l'élément n'est pas attaché au DOM pour commencer.
Guido
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.