web-dev-qa-db-fra.com

outerHeight (true) donne une mauvaise valeur

Je veux la hauteur d'un élément conteneur, y compris les marges et les rembourrages. 

Lorsque je survole l'élément dans l'outil de développement de Chrome, j'obtiens la valeur que je recherche, mais lorsque j'utilise jQuery $('element').outerHeight(true); Je reçois une valeur beaucoup plus petite. 

L'élément contient un carrousel jQuery (dans un conteneur avec position:relative et items position: absolute), cela pourrait-il avoir un rapport avec cela?

Merci d'avance

jquerypositioningdimensions
20
Viktor

J'ai rencontré ce problème à plusieurs reprises et la meilleure solution, sans utiliser de plug-in ou de fonctions indéfinies setTimeout, consiste à utiliser le hook dans l'événement onLoad du navigateur. Avec jQuery, c'est fait comme ça:

$(window).load(function(){ ...outerHeight logic goes here... });

Cela pourrait être totalement séparé de votre $(function(){ ...code... }); standard afin que tout votre autre code qui fonctionne correctement n'ait pas à attendre que tous les éléments de la page aient été chargés.

Pourquoi cela se produit-il en premier lieu:
Chrome utilise un algorithme de rendu différent de celui de Firefox, ce qui lui permet de déclencher l'événement onLoad avant que tous les éléments de la page ne soient complètement dessinés/affichés et disponibles pour que jQuery puisse sélectionner et récupérer des hauteurs. setTimeout() fonctionnera la plupart du temps, mais vous ne voulez pas développer une dépendance à quelque chose d'aussi aveugle par nature - qui sait, à l'avenir, ce "caprice" dans Chrome pourrait être corrigé! :)

30
Lasha

J'ai eu le même problème. J'obtiens la bonne hauteur dans Chrome en utilisant setTimeout pour attendre un peu:

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

J'espère que ça aide!

7
Matt Reilly

J'ai rencontré le même problème.

Hauteur extérieure de Firefox via console.log: 430 Hauteur extérieure de Chrome via console.log: 477

Hauteur extérieure réelle (disposition du bûcher): 820

Après l’ouverture de Firebug ou la suppression de la barre d’état, la valeur correcte (820) est définie dans console.log (et le code fonctionne donc comme il se doit). 

Le problème était dû aux images. Même si vous l'exécutez sur le document prêt, toutes les images ne sont peut-être pas encore chargées et, par conséquent, les calculs sont erronés.

J'utilise le plugin de desandro et le problème a été résolu. https://github.com/desandro/imagesloaded

5
Zoran P.

celui qui a fonctionné exactement comme il se doit pour moi était une combinaison des réponses @Matt Reilly et @Lasha

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

j'avais l'habitude de mettre le code dans $(document).ready(function(){...}); mais il devient parfois maladroit, donc ce qui précède fonctionne parfaitement.

2
ctf0

Je pense que vous pourriez avoir besoin 

.outerHeight({margin: true});

Selon ici :

La marge peut être incluse en passant une carte d'options avec une marge définie sur true.

2
Elliot Bonneville

J'ai essayé chacune de ces solutions. Finalement ouvert inspecteur et réalisé ma p avait toujours un margin-top. Comme toujours merci Normaliser ...

0
corysimmons

Selon la documentation , outerHeight n'est pas sûr d'être précis lorsque:

  • la page est zoomée
  • l'élément ou son parent est caché
0
Sam

Un petit bidouillage Placez le code dans jQuery au chargement, faites défiler et redimensionner les fonctions comme ceci:

$(window).on('load scroll resize', function(){
    //outerHeight code
});
0
DarkNRahlKarl

Les éléments internes cachés, fixes et absolus ne sont pas correctement pris en compte lors de l'utilisation de outerHeight.

Essayez la propriété scrollHeight:

$('element').prop('scrollHeight')
0
Rob

Si la fenêtre est chargée et que le document est prêt et que vous avez comptabilisé les flottants et que vous rencontrez toujours ce problème, envisagez de rechercher un élément avec le même identifiant. Assurez-vous d’obtenir le bon élément avec votre sélecteur jQuery. J'ai oublié que j'avais un autre élément dans le dom avec exactement le même identifiant. Pensez à utiliser jQuery pour modifier la couleur d'arrière-plan à vérifier.

0
user3338098