Déterminer la hauteur d'un div sans règle CSS explicite

Obtenir la hauteur d'un div peut être difficile s'il n'y a pas de hauteur explicitement définie dans le CSS. Bien que la méthode jQuery .height() soit généralement utilisée à cet effet, elle nécessite une règle CSS existante pour un fonctionnement correct. Voici une approche alternative :

Fonctions de hauteur jQuery

jQuery propose une gamme de fonctions de hauteur qui peuvent fournir des mesures de hauteur précises, même sans règles de hauteur CSS :

• .height(): Exclut le remplissage, la bordure et margin.
• .innerHeight(): Inclut le remplissage mais exclut la bordure et la marge.
• .outerHeight(): Inclut la bordure mais exclut la marge.
• .outerHeight(true): Inclut la marge.

Utilisation Démo

L'extrait de code ci-dessous montre comment utiliser ces fonctions :

$(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>')
});

Sortie :

La hauteur calculée du div est affichée dans le div lui-même, fournissant des informations détaillées sur la sortie de chaque fonction.