Table height 100%

**JLM Consultant** · 12/03/2012, 00h05

Bonjour à tous,

Alors que je consulte et utilise "developpez.net" depuis ces débuts, soit 1834, c'est la première fois que j'y publie un message car mes compétences d'autodidacte en HTML ont été mises à dure épreuve récemment

Voila mon problème !

Comme beaucoup de webmaster, j'utilise les tableau pour la mise en page de mes sites web .... Je sais, C'EST PAS BIEN

... Mais lapider une vieille dame ou crucifier un bébé non plus c'est pas bien et ça, promis, je l'ai pas fait, ou je ne m'en souviens plus !

Dans une page développée en doctype HTML 4.01 Transitional, j'utilise 2 tableaux imbriqués avec une hauteur=100% pour avoir une entête et un pied de page quelque soit la résolution de l'écran.

Avec FireFox et Google Chrome, tout va bien !
Avec Internet Explorer, mes tableaux dépassent et il suffit que ne déclare pas le doctype pour que l'affichage soit correcte !

Ci dessous, le lien vers une page test :
http://moncler.free.fr/test.php

Ci dessous le code source de la page :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>                                  
<style type="text/css">
html    { height:100% ; width:100% }
body    { height:100% ; width:100% ; margin:0px ; padding:0px ; border:none ; background-color:#FFFFFF }
table   { font-family:Arial,Verdana,Helvitica ; font-size:10pt ; color:#404040 ; border-collapse:collapse }
</style>		
</head>
<body>
<!-- Table pour la mise en page  -->
<table cellpadding="10" cellspacing="0" width="100%" style="border:2px solid #FF0000;height:100%" ><tbody>
<tr><td align="center" style="border:2px solid #FF0000" >
HAUT DE PAGE
</td><tr><td align="center" valign="top"  style="border:2px solid #FF0000;height:100%" >
<!-- Table accueillant le corps de page -->
<table cellpadding="10" cellspacing="0" width="1000" style="border:2px solid #0000FF;height:100%" ><tbody>
<tr><td align="center" valign="top">
CORPS DE PAGE
</td></tr>
</tbody></table>
</td><tr><td align="center"  style="border:2px solid #FF0000">
BAS DE PAGE
</td></tr>
</tbody></table>
</body>
</html>

Bref ... AU SECOURS ... Et merci d'avance pour votre aide !

Jean Louis

**tchize_** · 12/03/2012, 18h58

de mémoire, en CSS, une page n'a pas de "hauteur" maximale. Donc parler de 100% en hauteur, c'est 100% du conteneur, donc 100% d'un truc de hauteur infinie. *Cuic* La question fondamentale est donc, pour ton browser, c'est 100% de quoi? A vue de pifomètre, pour IE, c'est 100% de la fenêtre, alors que pour chrome/firefox, c'est 100% de la zone d'affichage.

Si ça peux aider, cet exemple marche avec ie
http://peterned.home.xs4all.nl/examples/csslayout1.html

Sinon, 1834, pas mal, je savais pas qu'il y avais eu une version machine à écrire de developpez

**NoSmoking** · 12/03/2012, 20h00

Bonjour,
un petit

Code css :

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

1
2
3
td{
  padding:0;
}

devrait résoudre le problème.

Je ne dirais rien sur l'utilisation de TABLE dans ton cas, mais je précise que la taverne de developpez existe depuis plus longtemps, 1664

**JLM Consultant** · 12/03/2012, 22h33

Merci d'abord à NoSmoking, mais ta réponse ne change rien au problème !

Merci à tchize, car il ma donné la réponse au "Pourquoi" ?

" pour IE, c'est 100% de la fenêtre, alors que pour chrome/firefox, c'est 100% de la zone d'affichage. "

Pourquoi n'y avais-je pas pensé Pluto (disait Mickey) !

C'est pourquoi, "tchize" est dorénavant inscrit dans mon répertoire dans la rubrique "Maître" !

Ceci étant, sa solution m'invite à utiliser le CSS, Pluto (encore lui) que les "table" pour la mise en page de mes pages !

Devant le Maître, je ne peux que obtempérer !

Le résultat :
http://moncler.free.fr/test2.php

Bon, au risque de froisser Mon Maître, il y a quand même un bug :

Quand le contenu inclue dans le div "content" dépasse la hauteur de l'écran, il empiète sur le bas de page !

L'astuce, est de rajouter au "contenant" un retour à la ligne (<p> </p>) !

Merci à vous 2 et à bientôt pour de prochaines aventures

Table height 100%

HTML

Discussions similaires

Partager

Partager