web-dev-qa-db-fra.com

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 pour cet élément? Je ne peux pas utiliser la méthode .height() jQuery car elle nécessite un jeu de règles CSS en premier? Y a-t-il un autre moyen d'obtenir de la hauteur?

jquerycssheight
84
Samuel Lopez

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

DÉMO

Vous pouvez utiliser .height(), .innerHeight() ou outerHeight() en fonction de vos besoins.

enter image description here

.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 de la div, y compris la bordure, mais exclut la marge.

.outerHeight(true) - renvoie la hauteur de la div, y compris la marge.

Vérifiez 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>
206
Selvakumar Arumugam

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'une div, cette hauteur étant déterminée par son contenu, doit être initialisée sur window.load, ou window.scroll pas document. prêt sinon je reçois des hauteurs impaires/inférieures, c'est-à-dire avant que les images ne soient chargées. J'ai aussi utilisé 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());   

});
35
Iamsamstimpson

Peut le faire 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

enter image description here

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

9
Madan Sapkota

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

7
Tom Scholes