[W3C] équivalent d'un height 100% sur un TR d'un TABLE

**j0hnmerrick** · 17/08/2007, 17h01

Bonjour

voilà mon problème :
je veux faire une page avec 3 zones horizontale (une entête, un corps et un bas de page). les 3 zones doivent toujours être visible.
l'entête et le bas de page doivent avoir une taille fixe.
le corps lui doit prendre tout le reste de la page (et donc se redimentionner si l'utilisateur redimentionne sa fenêtre)
voilà le code que j'ai pondu.

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
<html>
<head></head>
<body>
<table border="0" width="100%">
  <tr height="50">
    <td bgcolor="red"></td>
  </tr>
  <tr height="100%">
    <td bgcolor="green"></td>
  </tr>
  <tr height="50">
    <td bgcolor="blue"></td>
  </tr>
</table>
</body>
</html>

Ce bout de code marche impec sous ie6 et FF.
ie et ff ne trouve pas de doctype et affiche la page en utilisant un "vieux" système de rendu.
Par contre opera lui n'aime pas du tout ca et n'affiche la seconde ligne que sur 1 pixel. (alors que je veux que l'ensemble du navigateur soit couvert)

J'ai ainsi essayé de trouver le doctype adéquate, et de passer ma page au validateur w3c. Et là j'ai trouvé aucun doctype qui me permette d'avoir ce que je veux (du coup dès que je met un doctype ca fait pas ce que je veux ni sous ie, ni sous ff ni sous opera)

puis là j'ai regardé les DTD w3c et j'ai vu qu'il n'y avait pas de height sur les <table> et <tr>.

alors voilà du coup je sais plus comment faire.

en utilisant des DIV ca marcherait mieux ?
est ce que quelqu'un pourrait mettre en forme mon bout de code pour avoir un truc compatible pour les 3 navigateurs.

merci

**blueice** · 17/08/2007, 17h37

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exemple</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color:darkred;
}
#centre {
background-color:gray;
}
 
#pied {
height: 30px;
background-color:darkred;
}
</style>
</head>
 
<body>
 
      <div id="header">HEADER</a>
 
</div>
 
      <div id="centre">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Fusce ut purus. Ut ut diam. Praesent consequat condimentum
        massa. Praesent congue semper erat. Mauris ut dui ut arcu
        iaculis ornare. Quisque dignissim massa at libero. Sed faucibus.
        Vivamus tortor nibh, venenatis vitae, ornare vel, posuere vel,
        quam. Praesent erat. Cras lacus. Nulla sed arcu vel pede
        convallis tristique. Suspendisse elementum venenatis nulla.
        Mauris faucibus, metus blandit pulvinar gravida, ipsum tortor
        vestibulum elit, ut lacinia nibh purus non tortor.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Fusce ut purus. Ut ut diam. Praesent consequat condimentum
        massa. Praesent congue semper erat. Mauris ut dui ut arcu
        iaculis ornare. Quisque dignissim massa at libero. Sed faucibus.
        Vivamus tortor nibh, venenatis vitae, ornare vel, posuere vel,
        quam. Praesent erat. Cras lacus. Nulla sed arcu vel pede
        convallis tristique. Suspendisse elementum venenatis nulla.
        Mauris faucibus, metus blandit pulvinar gravida, ipsum tortor
        vestibulum elit, ut lacinia nibh purus non tortor.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Fusce ut purus. Ut ut diam. Praesent consequat condimentum
        massa. Praesent congue semper erat. Mauris ut dui ut arcu
        iaculis ornare. Quisque dignissim massa at libero. Sed faucibus.
        Vivamus tortor nibh, venenatis vitae, ornare vel, posuere vel,
        quam. Praesent erat. Cras lacus. Nulla sed arcu vel pede
        convallis tristique. Suspendisse elementum venenatis nulla.
        Mauris faucibus, metus blandit pulvinar gravida, ipsum tortor
        vestibulum elit, ut lacinia nibh purus non tortor.</p>
      </div>
 
      <div id="pied">pied de page</div>
 
</body>
</html>

**j0hnmerrick** · 20/08/2007, 08h19

re

non ce n'est pas du tout ca ce que je veux.
Dans le script précédent le pied de page suite directement le corps.

Je voudrais que même si le corps de la page est vide et bien le pied de page soit tout en bas du navigateur et avoir une zone vide qui prend presque toute la page.
De même si l'utilisateur réduit la fenêtre je veux pas que je pied de page disparaisse.
Je veux vraiment que le rendu soit identique a celui de ce code là sous ff.
mais en ajoutant un doctype et en le rendant compatible à opéra.

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
<html>
<head></head>
<body>
<table border="0" width="100%">
  <tr height="50">
    <td bgcolor="red"></td>
  </tr>
  <tr height="100%">
    <td bgcolor="green"></td>
  </tr>
  <tr height="50">
    <td bgcolor="blue"></td>
  </tr>
</table>
</body>
</html>

des idées ???

merci

**blueice** · 20/08/2007, 08h35

Code css :

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

1
2
3
4
5
 
#footer {
    position: absolute;
    bottom: 0;
    }

**j0hnmerrick** · 20/08/2007, 09h01

reprise du bout de code

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exemple</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
        height: 100px;
        background-color:#99FF99;
}
#centre {
        background-color:#0066CC;
}
 
#pied {
        position: absolute;
    bottom: 0;
        height: 100px;
        background-color:#CC9900;
        width:100%
}
</style>
</head>
<body >
<div id="header"></div>
<div id="centre"></div>
<div id="pied"></div>
</body>
</html>

comme on peut le voir avec ca, le partie central (de couleur #0066CC) n'est pas là., on voit une grosse zone blanche a la place.
en pratique je voudrais la même chose que ce qui est afficher avec du #0066CC à la place du blanc.

En fait le truc c'est que derrière ca y'aura une carte qui se redimentionne automatique par rapport à la taille de cellule (div ou td) sur laquelle est est. c'est pour cela que j'essai d'avoir une zone central qui prend le maximum de place même a vide.

merci

**j0hnmerrick** · 21/08/2007, 10h11

bon alors j'ai pas trouvé mieux que de faire ca en javascript

et de mettre dans le head

Code :

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

1
2
3
4
5
6
7
8
<script>
                /*initialiser la surveillance de Netscape*/
                        
                if(!window.largeur && window.innerWidth)
                {
                        window.onresize = chargement;
                }
                </script>

dans le body

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
                <!--
                 /*initialiser la surveillance par l'Explorer Internet MS*/
                 if(!window.largeur && document.body && document.body.offsetWidth)
                  {
                   window.onresize = chargement;
                  
                  }
                //-->
                </script>

la fin du body

Code :

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

1
2
3
<script>
                        chargement();
                </script>

et la méthode chargement

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
function hauteur_fenetre()
{
 if (window.innerHeight) return window.innerHeight  ;
 else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
 else return 0;
}
 
 
function chargement() {
	var h1 = document.getElementById("header").offsetHeight;
	var h2 = document.getElementById("pied").offsetHeight;
 
 
	var hh = hauteur_fenetre();
	var size = (hh -(h1+h2));
	document.getElementById("centre").style.height = ""+ size +"px";
 
}

voilà c'est quand meme bien galère du coup, mais pas trouvé mieux

[W3C] équivalent d'un height 100% sur un TR d'un TABLE

HTML

Vue hybride

Discussions similaires

Partager

Partager