Tableau qui prend toute la hauteur

**cootchy** · 29/11/2006, 11h47

Bonjour à tous,

Je voudrais faire un tableau qui prend toute la hauteur de la page.
Cependant de tableau est placé dans un div qui lui est en position:absolute.

Or le fait que le div soit absolu empêche la table de prendre toute la hauteur.

Ma table doit obligatoirement être dans un div absolu car ma page affiche ensuite un menu qui est placé lui aussi en absolu (il doit s'afficher en dessous du bloc rose).

Je vous laisse un exemple HTML de la structure de ma page.

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
 
<html>
 
<style>
.pouet {
position:absolute;
top:0px;
left:50%;
width:1001px;
margin-left:-500px;
}
 
.menu {
float:right;
background:pink;
}
 
</style>
 
 
<body>
 
<div class="pouet">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="blue">
       <tr>
            <td>
 
                <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="red">
                    <tr>
                        <td height="30px">
    			            <div class="menu">c moi qui affiche le menu</div>
                        </td>
                    </tr>
 
                    <tr>
                        <td height="100%">
    				        <iframe id="portal" name="portal" src="http://www.google.fr" width="100%" height="100%" frameborder="0"></iframe>
                        </td>
                    </tr>
 
                    <tr>
                        <td height="30px">
 
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
 
</body>
</html>

Je vous laisse également 2 images pour vous montrer ce que j'obtiens et ce que je souhaite obtenir.

Merci par avance pour votre aide.

**Jérémy Lefevre** · 29/11/2006, 12h01

conclusion affiche tout en relatif! si tu sais ce que relatif veux dire! tu comprendra que ca va beaucoup mieu! et que ta solution absolu n'est pas possible en html pure!

**MasterOfChakhaL** · 29/11/2006, 13h04

Salut,

Le fait de mettre un élément en absolu n'implique pas que l'élément parent doit aussi être placé en absolu...

positionnement absolu:
l'élément est positionné par rapport au premier élément ancêtre qui est positionné (absolute, relative...). En l'absence d'un ancêtre positionné, c'est la fenêtre du navigateur qui sert de référence.

positionnement relatif:
l'élément est positionné par rapport à l'emplacement qu'il aurait normalement occupé dans le flux normal. Ca donne un décalage par rapport à la position normale si on modifie une des propriétés top, bottom, left ou right.

Exemple pour bien comprendre:

Code html :

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

1
2
3
4
5
6
7
 
...
<div class="message">
  bla bla bla bla
  <img class="avatar" src="...." />
</div>
...

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
.message {
  position: relative; /*l'emplacement n'es pas modifié */
}
 
img.avatar {
  position: absolute;
  top:0;
  right:0;
}
/* l'image est placé en haut à droite du message*/

Tableau qui prend toute la hauteur

Dimensionnement en CSS

Discussions similaires

Partager

Partager