Comment obtenir la hauteur d'un document entier avec JavaScript?

333

Certains documents, je ne peux pas obtenir la hauteur du document (pour positionner quelque chose d'absolument tout en bas). De plus, un padding-bottom sur semble ne rien faire sur ces pages, mais le faire sur les pages où la hauteur reviendra. Cas (s) au point:

http://fandango.com
http://paperbackswap.com

Sur Fandango,
jQuery $(document).height();renvoie une valeur correcte
document.heightrenvoie 0
document.body.scrollHeightrenvoie 0

Sur Paperback Swap:
jQuery's $(document).height();TypeError: $(document)is null
document.heightrenvoie une valeur incorrecte
document.body.scrollHeightrenvoie une valeur incorrecte

Remarque: J'ai des autorisations au niveau du navigateur, s'il y a une astuce.

javascript

— Nic
source

5

$ (document) est nul parce que jQuery n'a pas été chargé sur ce site ...

— James

Hm, j'aurais juré avoir vérifié autre chose pour confirmer que jQuery était enregistré mais ça ne ressemble pas à moi, HA! Je pensais que Firebug avait jQuery empaqueté ... hm, je suppose que je vais vérifier cela si c'est une solution.

— Nic

4

firebug n'a pas jQUery empaqueté

— harsimranb

Voir Recherche de la taille de la fenêtre du navigateur . Il a une grande table des comportements des différents navigateurs.

— Oriol

671

La taille des documents est un cauchemar pour la compatibilité des navigateurs car, bien que tous les navigateurs exposent les propriétés clientHeight et scrollHeight, ils ne sont pas tous d'accord sur la façon dont les valeurs sont calculées.

Il existait auparavant une formule complexe de meilleures pratiques pour la façon dont vous avez testé la bonne hauteur / largeur. Cela impliquait l'utilisation des propriétés document.documentElement si elles étaient disponibles ou le repli sur les propriétés du document, etc.

La façon la plus simple d'obtenir la hauteur correcte est d'obtenir toutes les valeurs de hauteur trouvées sur document ou documentElement et d'utiliser la plus haute. C'est essentiellement ce que jQuery fait:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Un test rapide avec le bookmarklet Firebug + jQuery renvoie la hauteur correcte pour les deux pages citées, tout comme l'exemple de code.

Notez que le test de la hauteur du document avant qu'il ne soit prêt entraînera toujours un 0. De plus, si vous chargez plus de contenu ou si l'utilisateur redimensionne la fenêtre, vous devrez peut-être effectuer un nouveau test. Utilisez onloadou un événement prêt pour le document si vous en avez besoin au moment du chargement, sinon testez simplement chaque fois que vous avez besoin du numéro.

— Borgar
source

2

évaluez cette solution, car elle fonctionne lorsque vous utilisez la bibliothèque de prototypes, avec jQuery il n'y a pas un tel problème

— se_pavel

10

Lorsque vous travaillez avec des iframes et jquery, en raison de cette méthode de calcul, la hauteur du document de l'iframe sera toujours au moins la hauteur de l'iframe lui-même. Ceci est important à noter lorsque vous souhaitez réduire la hauteur de l'iframe pour correspondre au contenu. Vous devez d'abord réinitialiser la hauteur de l'iframe.

— David Lay

3

J'ai eu besoin de développer l'iframe et de la réduire (application facebook) et j'ai trouvé que document.body.offsetHeight était le meilleur choix pour moi, pris en charge avec précision par la plupart des navigateurs.

— JeffG

1

C'est génial bien que cela puisse donner des résultats incorrects si le document n'est pas prêt - c'est-à-dire lorsqu'il est utilisé dans le code généré par le serveur ...

— stuartdotnet

1

Tester le document avant qu'il ne soit prêt ne fonctionnera pas. Cela n'a rien à voir avec le code / les documents générés mais plutôt la façon dont le document est chargé. Le test doit s'exécuter une fois le document prêt, et je suggère de l'exécuter uniquement lorsque le document est entièrement chargé, car les éléments restants peuvent affecter la hauteur, et redimensionner également le navigateur.

— Borgar

214

C'est une très vieille question, et donc, a de nombreuses réponses obsolètes. En 2020, tous les principaux navigateurs ont adhéré à la norme .

Réponse pour 2020:

document.body.scrollHeight

Edit: ce qui précède ne prend pas en compte les marges du <body>tag. Si votre corps a des marges, utilisez:

document.documentElement.scrollHeight

— Marquizzo
source

hm - maintenant je le teste et ça marche - je ne sais pas pourquoi - donc ok :) - je supprime mon commentaire précédent

— Kamil Kiełczewski

6

À partir de 2017, cela devrait être marqué comme la bonne réponse pour moi.

— Joan

@Joan C'est à l'affiche originale de décider :)

— Marquizzo

Ne fonctionne pas en présence de marges. document.documentElement.getBoundingClientRect()fonctionne mieux.

— torvin

3

Il y a une erreur avec ceci: disons par exemple qu'il y a un <h1>élément au début du <body>avec sa marge par défaut, il poussera l' <body>élément vers le bas sans moyen de le détecter. document.documentElement.scrollHeight(pas document.body,scrollHeight) est la façon la plus précise de faire les choses. Cela fonctionne à la fois avec les marges du corps et les marges des objets à l'intérieur du corps en le poussant vers le bas.

— Ethan

29

Vous pouvez même utiliser ceci:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

ou d'une manière plus jQuery (puisque comme vous l'avez dit jQuery ne ment pas) :)

Math.max($(document).height(), $(window).height())

— Mimo
source

24

Calcul complet de la hauteur du document:

Pour être plus générique et trouver la hauteur de n'importe quel document, vous pouvez simplement trouver le nœud DOM le plus élevé sur la page actuelle avec une récursivité simple:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

Vous pouvez le tester sur vos exemples de sites ( http://fandango.com/ ou http://paperbackswap.com/ ) en collant ce script sur une console DevTools.

REMARQUE: il fonctionne avec Iframes.

Prendre plaisir!

— Andrii Verbytskyi
source

2

Cela a fonctionné comme un charme! Aucune autre réponse ne fonctionne ici pour obtenir la pleine hauteur (y compris la zone de défilement), elles renvoient toutes uniquement la hauteur de la zone visible.

— Martin Kristiansson

Vraiment exceptionnel, jamais pensé à ça. Je suppose qu'un seul travaille dans des fantômes.

— MindlessRanger

6

La «méthode jQuery» de détermination de la taille du document - tout interroger, prendre la valeur la plus élevée et espérer le meilleur - fonctionne dans la plupart des cas, mais pas dans tous .

Si vous avez vraiment besoin de résultats à l'épreuve des balles pour la taille du document, je vous suggère d'utiliser mon plugin jQuery.documentSize . Contrairement aux autres méthodes, il teste et évalue le comportement du navigateur lorsqu'il est chargé et, en fonction du résultat, interroge la bonne propriété à partir de là.

L'impact de ce test unique sur les performances est minime , et le plugin renvoie les bons résultats même dans les scénarios les plus étranges - non pas parce que je le dis, mais parce qu'une suite de tests massive et générée automatiquement vérifie effectivement que c'est le cas.

Parce que le plugin est écrit en Javascript vanilla, vous pouvez également l'utiliser sans jQuery .

— hashchange
source

5

J'ai menti, jQuery renvoie la valeur correcte pour les deux pages $ (document) .height (); ... pourquoi en ai-je jamais douté?

— Nic
source

1

Différents navigateurs bro.

— jahrichie

4

La bonne réponse pour 2017 est:

document.documentElement.getBoundingClientRect().height

Contrairement à document.body.scrollHeightcette méthode, elle tient compte des marges corporelles. Il donne également une valeur de hauteur fractionnée, ce qui peut être utile dans certains cas

— torvin
source

1

Voici les résultats que j'obtiens lorsque j'essaie votre méthode sur cette page: i.imgur.com/0psVkIk.png Votre méthode renvoie quelque chose qui ressemble à la hauteur de la fenêtre, tout en document.body.scrollHeightrépertoriant la hauteur de défilement entière, ce qui est ce que la question d'origine a demandé.

— Marquizzo

2

@Marquizzo c'est parce que cette page a html { height: 100% }en CSS. L'API renvoie donc correctement la hauteur réelle calculée. Essayez de supprimer ce style et d'ajouter également des marges à bodyet vous verrez quel est le problème avec l'utilisation document.body.scrollHeight.

— torvin

Il y a une erreur avec ceci: disons par exemple qu'il y a un <h1>élément au début du <body>avec sa marge par défaut, il poussera l' <body>élément vers le bas sans moyen de le détecter. document.documentElement.scrollHeight(pas document.body,scrollHeight) est la façon la plus précise de faire les choses.

— Ethan

@Booligoosh ne sais pas ce que tu veux dire. documentElement.scrollHeightdonne une mauvaise valeur dans ce cas. documentElement.getBoundingClientRect().heightdonne le bon. check this out: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin Fact demeure que le résultat escompté n'est pas renvoyé par getBoundingClientRect().height. Il est détourné, tandis que 3 (trois) autres méthodes ne sont pas détournées. Y compris celui que vous mentionnez comme inférieur. Et vous insistez pour le faire en suggérant de supprimer 100% de la hauteur html de cette page et en y ajoutant des marges. À quoi ça sert ? Acceptez simplement que ce getBoundingClientRect().heightn'est pas non plus à l'épreuve des balles.

— Rob Waa

2

Pour obtenir la largeur d'une manière croisée navigateur / appareil, utilisez:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
source

11

nous parlons de hauteur. pas la largeur.

— Yash

0

Pour tous ceux qui ont du mal à faire défiler une page à la demande, à l'aide de la détection de fonctionnalités, j'ai trouvé ce hack pour détecter la fonctionnalité à utiliser dans un défilement animé.

Le problème était à la fois document.body.scrollTopet document.documentElementtoujours renvoyé truedans tous les navigateurs.

Cependant, vous ne pouvez réellement faire défiler un document qu'avec l'un ou l'autre. d.body.scrollToppour Safari et document.documentElementpour tous les autres selon w3schools (voir exemples)

element.scrollTop fonctionne dans tous les navigateurs, pas pour le niveau du document.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

— YK
source

-1

utiliser le code de coup pour calculer la hauteur + faire défiler

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

— ali bagheri
source

-1

Ce code de navigateur croisé ci-dessous évalue toutes les hauteurs possibles du corps et des éléments html et renvoie le maximum trouvé:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

Un exemple pratique:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();

body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}

<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />

Développer l'extrait

— Willy Wonka
source

Veuillez expliquer la motivation en cas de vote négatif afin que je puisse corriger le point. Merci beaucoup

— willy wonka

-4

Je ne sais pas comment déterminer la hauteur pour l'instant, mais vous pouvez l'utiliser pour mettre quelque chose en bas:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

— jedihawk
source

1

Croyez-moi, j'ai épuisé les ressources HTML et CSS sur celui-ci. Je ne peux pas l'expliquer, mais vous verrez les problèmes si vous essayez ceci sur ces sites.

— Nic

-4

Ajouter des références correctement

Dans mon cas, j'utilisais une page ASCX et la page aspx qui contient le contrôle ascx n'utilise pas correctement les références. Je viens de coller le code suivant et cela a fonctionné:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

— Tosh
source