Calcul de la hauteur d'une page

**gailup** · 09/06/2006, 10h02

Bonjour,

Voici ce que je veux faire :
J'ai mon site web développé avec PHP et du CSS pour les cadres. J'ai un cadre à gauche qui sert de menu et le contenu de ma page sur tout le reste et je veux calculer la taille en pixels de la page qui sera afficher dans le contenu, comme ça si la hauteur de ma page de contenu est inférieur à la hauteur de mon menu je rajoute des espaces après mon contenu pour avoir la meme hauteur sur toute ma page.

Voici ma question :
Est-il possible de faire ceci ? Si, avec quel language, comment faire, etc ?

Merci d'avance.

Gailup

**Eusebius** · 09/06/2006, 10h05

Bonjour
Pour les mesures en pixels, si ton CSS est bien fait tu devrais pouvoir faire le compte.

Pour les ajustements, tu peux rajouter des "blocs" css blancs par exemple, mais comme il faut le faire sur des conditions il faut utiliser un langage de script. Tu peux modifier ton source HTML avec PHP, ASP, ou même peut-être Javascript chez le client. JS pourrait même te donner des indications plus précises sur la manière dont le client affiche ta page, mais je garantis rien.

**gailup** · 09/06/2006, 10h11

En fait, voila mon site web : http://jnfontaine.free.fr
Avec IE, mes cadres sont alignés
Par contre si tu utilise Mozilla Firefox tu va voir mon erreur.

Et c'est à cause de Mozilla que je doit calculer la hauteur pour aligné mes pages en fonctions de la hauteur.

Gailup

**Eusebius** · 09/06/2006, 10h23

Si tu respectes les standards W3C, tu n'auras pas de souci avec Mozilla et compagnie.

**neilbgr** · 09/06/2006, 10h27

Un site internet doit être plutot vu comme un flux d'infos cadré en largeur (variable) et en hauteur indéfinie. Donc, on ne doit pas se poser la question "combien de pixel fait ma page", et, à mon humble avis, les site dont la hauteur est fixe, ne respect pas les principes d'accessibilité, les types de navigateurs extrémement différents (texte brut, vocal, IE, ...) . Les références dans ce domaine sont Firefox et Opéra.
Donc, si ca marche sous IE et pas sous Opéra/Firefox, c'est que ce n'est pas bon. Faut revoir sa copie. (à l'inverse, il faut malheureusement bidouiller)

Enfin, pour ton cas, je pense qu'il faut expliciter (dans le css) les margin et les padding de tes balises div.

Autre remarque: au vu du source généré, il y a un petit problème: une page avec plusieurs balise head et body, ce n'est pas très valide ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<HTML>
  <HEAD>
<!--Insertion des fichiers CSS pour les liens, boutons-->
    <link rel='stylesheet' type='text/css' href='struct/link.css'>
<!--Insertion des fichiers CSS pour les frames par rapport à la résolution décran du client-->
    <script type = 'text/javascript' language = 'Javascript'>
      var largeur = screen.width ;
      if(largeur < 1000){
        document.write("<link rel='stylesheet' type='text/css' href='struct/frame2.css'>") ;
        document.write("Attention ce site est pour du 1024 par 800") ;
      } else{
        if(largeur > 1100){
          document.write("<link rel='stylesheet' type='text/css' href='struct/frame2.css'>") ;
        } else{
          document.write("<link rel='stylesheet' type='text/css' href='struct/frame.css'>") ;
        }
      }
    </script>
  </HEAD>
  <BODY bgcolor = "#777777">
    <div id = "bandeau" border = 3>
<!-- BANDEAU -->
 
      blablablablablabla
    </div>
    <div id = "contenu">
<!-- PARTIE DE GAUCHE -->
      <div id = "gauche">
        <a href="index.php?page=accueil">ACCUEIL</a><br>
        <a href="index.php?page=calendar">CALENDRIER</a><br>
        <a href="index.php?page=folder">DOSSIER</a><br>
 
        <a href="index.php?page=news">NEWS</a><br>
        <a href="index.php?page=picture">PHOTOS</a><br>
        <a href="index.php?page=result">RESULTATS</a><br>
        <a href="index.php?page=schedule">HORAIRES</a><br>
        <a href="index.php?page=video">VIDEOS</a><br>
        <a href="index.php?page=P4">P4.COM</a><br>
 
        <br><br><br><br><br><br><br><br><br><br><br>fdkvkdfkv<br><br><br><br><br>dfndlgvnlndfl
      </div>
<!-- PARTIE DE DROITE -->
      <div id = "droite">
        Sondage, Pub<br><br><br>vldlcck
        <table border = 5 width = "140px" align = "center"><tr><td>PDFFDXXX  DSDSDSDSD</td></tr></table>
        <br><br><br><br><br><br><br><br><br><br><br>fdkvkdfkv<br><br><br><br><br>dfndlgvnlndfl
      </div>
 
<!-- PARTIE CENTRALE -->
        <HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <center><h1>ACCUEIL, TOP 15 NEWS</h1></center>
    <br><br>
<!-- TABLEAU DE 700 PIXELS POUR L'ALIGNEMENT DES INFOS -->
    <table border=3 width=650 align=center><tr><td>
 
<!-- TABLEAU POUR LES 15 DERNIERES NEWS -->
      <!--<table border="" ></table>-->
          </td></tr></table>
<!-- Fin du tableau d'alignement des infos -->
  </BODY>
</HTML><br><br>
<center><b>Copyright 2006 - GAILUP</b></center>
    </div>
  </BODY>
</HEAD>