Hauteur totale d'une page

Version imprimable

22/04/2008, 16h16
maxime115

Hauteur totale d'une page

Bonjour !

Je suis en train de refaire totalement mon petit site internet en y ajoutant un menu. Pour cela, dans toutes mes pages j'appelle ce menu, au début du <body> grace a un include.

Ce menu est composé d'un div en float:left et height:100%

Jusque là tout fonctionne bien.

Mais les ennuis arrivent quand la page est trop grande pour etre entierrement afichée sur l'écran et où il y a donc une scrollbar.
En effet, le texte de la page appellante va ensuite "passer sous" le menu, étant donné que le div du menu ne va pas jusqu'au bout de la page.

Vous me suivez?

En fait il me faudrait donc que je récupère en javascript la hauteur totale de la page pour que j'affecte cette hauteur a celle du div de mon menu.

J'ai longuement cherché sur les différents moteurs de recherches du web et sur ce forum, mais je ne trouve rien, ou rien qui fonctionne.

j'ai vu qu'on pouvait utiliser

Code:

document.documentElement.scrollHeight;

pour justement connaitre cette valeur.

Or cela ne fonctinne pas chez moi, la valeur renvoyée est toujours la même, que la page admette des scrollbar ou non.

j'ai donc pensé a faire l'addition de la hauteur de la page du navigateur :

Code:

document.body.clientHeight

et de la hauteur de la zone de défilement sous l'ascenseur, pour avoir la hauteur totale de la page.

Mais je ne sais pas comment récuperer la hauteur "scrollable"...

Quelqu'un aurait des idées à me proposer pour résoudre ce problème?

Merci d'avance

la heuteur visible
Code:

1 2 3 4 5 6 <style type='text/css'> html {height:100%;} </style> </head> <body onresize="alert(document.getElementsByTagName('html')[0].offsetHeight)">
ou scrollHeight pour la hauteur scrollable ...

22/04/2008, 17h05
maxime115

Ok pour la hauteur visible.

Par contre pour la hauteur scrollable, il s'agit exactement de la même que celle de la hauteur visible...
ALors que dans mon index, j'ai 2 lignes qui sont hors page...

en fait jai

Code:

document.getElementsByTagName('html')[0].offsetHeight = document.getElementsByTagName('html')[0].scrollHeight
22/04/2008, 17h07
SpaceFrog

essaye avec body , ou l'element contenant les lignes ...
22/04/2008, 17h28
maxime115

C'est toujours pareil...
la valeur

Code:

document.body.scrollHeight

reste identique sur chaque page...

Code:

1
2
3
4
5
<body onresize="alert(document.body.scrollHeight)">
<input type='text' id='bar' />
<input type='button' onclick="foo(document.getElementById('bar').value)" value='go'/>
<div style="height:30000px">dd</div>
</body>

J'ai une erreur sur la page , le code n'arrive pas a reprendre la valeur 'bar' ...

Je l'ai modifié comme suit... j'ai du faire une erreur
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <script type="text/javascript"> function test() {foo(document.getElementById('bar').value)} </script> </head> <body onresize="alert(document.body.scrollHeight)"> <input type='text' id='bar' /> <input type='button' onclick="javascript:test()" value='go'/> <div style="height:30000px">dd</div> </body> </html>

22/04/2008, 19h06
maxime115
En fait c'est bon... c'est moi qui n'avait pas mi ma fonction de redimensionnement a la fin du body... du coup la valeur renvoyée n'etait pas celle de la page ayant fini de charger....

Par contre j'ai un léger problème maintenant...
Je suis obligé de rafraichir la page pour que mon div se redimensionne jusqu'au bout de cette dernière...

Quand j'arrive sur la page, pour la premiere fois, c'est comme si le code n'avait pas vu qu'il y avait quelque chose en dessous (accessible avec la scrollbar)
Et quand je réactualise, là, il voit bien toute la page, et ca fonctionne bien..

Structure de ma page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> ... </head> <body> include vers mon menu PAGE include fichier "redimensionneur" </body> </html>
code de fichier redimensionneur :
Code:

1 2 3 4 <SCRIPT type="text/javascript"> taillepage = document.body.scrollHeight; document.getElementById('menu').style.height = taillepage; </script>
Qu'elqu'un voit comment ne pas être obligé de rafraichir la page pour que le code s'execute bien ?

EDIT: non en fait c'est bon grâce a onload dans le body !
22/04/2008, 19h34
SpaceFrog

a quel moment tu la veux la redim ??? au chargement ... ?

une fonction ...
et le onload du body