Problème avec document.body.clientHeight

Question

Salut à tous,

J'aimerai positionner un calque dans ma page en fonction de la résolution de l'écran. Pour la largeur j'utilise la propriété document.body.clientWidth qui me donne la largeur utile de la page (sans l'habillage du navigateur) et qui fonctionne très bien, en revanche pour la hauteur la propriété document.body.clientHeight me renvoie toujours 0.
Est ce que quelqu'un sait pourquoi et comment je peux faire pour avoir la hauteur utile de la page ?

merci

chimelpremier · Answer

La hauteur utile de la fenêtre chez IE en mode quirk est bien :
document.body.clientHeight . Elle est renseignée aprés le chargement :

window.onload=function(){
alert(document.body.clientHeight )
}

Sb01 · Answer

Le problème c'est que document.body.clientHeight me renvoie toujours 0 donc je peux pas l'utiliser pour positionner mon calque.
C'est bizarre car la propriété document.body.clientWidth marche très bien pour la largeur donc je comprend pas pourquoi document.body.clientHeight ne marche pas pour la hauteur ...

Est ce que quelqu'un pourrait m'aider ?

coucou747 · Answer

t'as quoi comme navigateur ?

if (document.body){
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}else{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}

tu peuxd tester ça...

Sb01 · Answer

j'ai tester ton code coucou747 mais y'a rien à faire ça marche toujours pas :

document.body.clientHeight me renvoie toujours 0
window.innerHeight me renvoie undefined

Une autre solution ?

chimelpremier · Answer

tu doit tester une page vide,essai ça :

coucou747 · Answer

mais ta's quel navigateur ?

Sb01 · Answer

j'ai internet explorer 6

coucou747 · Answer

dsl je ne peux pas tester...

chimelpremier · Answer

SB01 as-tu tester mon bout de code?

Sb01 · Answer

chimelpremier j'ai testé ton code et cette fois il me renvoie la hauteur du calque ( c'est à dire 400 ) mais toujours pas la hauteur de la page !!!!
J'ai testé le même code avec document.body.clientWidth à la place de document.body.clientHeight et là ça me renvoie bien la largeur de la page et pas celle du calque.

Y'a un mystère quelque part là ....

coucou747 l'idéal ça serait que mon code marche pour la plupart des navigateurs donc si tu as des solutions pour d'autres navigateurs je suis preneur :)

coucou747 · Answer

en fait t'as une solution tout navigateur
masi c'ets plus une ruse qu'une solution...

il faut mettre un div tout en bas et récupèrer ton ordonée...

chimelpremier · Answer

SB01 donc tu n'a plus 0, et tu as en partie raison le calque ne sert à rien :

cliques ici, redimensionne ta fenêtre en hauteur et cliques de nouveau, normalement, si tu as IE comme navigateur, tu dois obtenir la hauteur interne de ta page sinon ya un blème 

Pour les variantes navigateur à ce sujet, l'oiseau quadriréacteur a raison, il n'y en a que 2 : IE et Gecko

Sb01 · Answer

Bon bah y'a un problème quelque part. Avec ton nouveau code ça me renvoie juste la hauteur du texte ( environ 40 ) mais toujours pas la hauteur de la page ........ :'( 
Je sais pas si c'est un problème de mon navigateur ou si la propriété utilisée n'est pas la bonne mais en tout cas ça marche toujours pas.
J'ai essayé toute les fonctions que je connaissais et j'en ai pas trouvée une qui me donne la hauteur de la page (alors que pour la largeur ça marche bien) .....

Si quelqu'un a une ultime solution avant que j'abandonne ? :)

chimelpremier · Answer

Tu as quel système d'exploitation ? On vois passer des messages concernant XP SP2 en ce moment !

Sb01 · Answer

j'ai XP mais sans le SP2

Sb01 · Answer

ça y est j'ai trouvé !!!!!!!!!

Donc pour avoir la hauteur et la largeur de la page sans l'habillage du navigateur, il faut utiliser :

   - pour internet explorer :
      document.body.parentNode.clientWidth
      document.body.parentNode.clientHeight

   - pour les autres navigateurs :
      window.innerWidth
      window.innerHeight

merci à chimelpremier et à coucou747 :)

coucou747 · Answer

euh non, il n'y a pas que gecko et IE il y a aussi Konqueror, et je ne sais pas si netscape et opéra utilisent gecko, il y a lynx aussi...

bientot Konqueror adoptera gecko, et les autres navigateurs sont très peu utilisé, un y a environ 99% des personnes qui utilisent gecko ou IE...

chimelpremier · Answer

Netscape 6 & +, Mozilla1 & +, Fire fox reconnaissent la syntaxe Gecko pour Event 
Opera : les 2 syntaxes
Konqueror je pense Gecko mais je ne connais pas, j'ai pas LINUX

SB01, le fil n'est pas terminé : je pense que tu nous as caché le Doctype avec une adresse DTD en tête de ta page et dans ce cas IE reconnais document.documentElement.clientHeight

Je mentionne les 3 syntaxes dans mes sources

Sb01 · Answer

En effet chimelpremier j'ai bien un Doctype en tête de ma page mais je ne sais pas du tout à quoi ça sert en fait. Voilà ce qui est écrit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Est ce que je dois laisser cette ligne ou est ce qu'il vaut mieux que je l'enlève ?

Encore une autre question, j'ai testé mon code avec Firefox et Konqueror et dans les deux cas les propriétés suivantes ne marchent plus  :
  document.getElementById().style.posWidth
  document.getElementById().style.posHeight
  document.getElementById().style.posLeft
  document.getElementById().style.posTop

Elles me renvoient à chaque fois undefined.
Est ce que c'est lié à l'histoire du Doctype ou bien est ce parce que ces propriété ne sont pas reconnues par les navigateurs ?

coucou747 · Answer

ocument.getElementById().style.Left
document.getElementById().style.Top

ça ça fonctionne

sinon Konqueror != gecko !!!

Konqueror risque d'adopter bientot gecko mais c'ets pas pour tout de suite... pour le moment c'ets un moteur perso...

Problème avec document.body.clientHeight

22 réponses

Votre réponse