Hauteur totale d'une page

**maxime115** · 22/04/2008, 16h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 22/04/2008, 16h30

la heuteur visible

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**maxime115** · 22/04/2008, 17h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('html')[0].offsetHeight = document.getElementsByTagName('html')[0].scrollHeight

**SpaceFrog** · 22/04/2008, 17h07

essaye avec body , ou l'element contenant les lignes ...

**maxime115** · 22/04/2008, 17h28

C'est toujours pareil...
la valeur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.body.scrollHeight

reste identique sur chaque page...

**SpaceFrog** · 22/04/2008, 17h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**maxime115** · 22/04/2008, 19h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**SpaceFrog** · 22/04/2008, 19h34

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

une fonction ...
et le onload du body

Hauteur totale d'une page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager