Hauteur de div

**Squaredge** · 23/11/2008, 22h50

Après pas mal de recherche sans succès sur le net sur la possibilité de rendre "dynamique" la hauteur d'un div, je me tourne vers ce forum pour espèrer une réponse positive.

Tout d'abord voici mon code (j'ajoute suffisamment de texte pour visualiser mon problème) :

HTML

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Lorem ipsum</title>
    <link href="position.css" type="text/css" rel="stylesheet" media="screen" />
  </head>
 
  <body>
    <div id="left"></div>
    <div id="center">
      <div id="header">
        <div id="logo">
          <h1>Logo</h1>
          <h2>Lorem ipsum</h2>
        </div>
      </div>
      <div id="news">
        <ul>
          <li>
            <h5>Lorem ipsum</h5>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
              Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
              nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
              risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
              egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
            </p>
          </li>
          <li>
            <h5>Lorem ipsum</h5>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
              Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
              nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
              risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
              egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
            </p>
          </li>
          <li>
            <h5>Lorem ipsum</h5>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
              Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
              nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
              risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
              egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
            </p>
          </li>
          <li>
            <h5>Lorem ipsum</h5>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
              Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
              nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
              risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
              egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
            </p>
          </li>
        </ul>
      </div>
      <div id="content">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
          Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
          nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
          risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit arcu ac justo.
          Suspendisse ut ligula. Ut euismod. Sed ut ante. Fusce convallis ullamcorper metus. Quisque
          nisi. Donec cursus lacus. Mauris pharetra semper felis. Vestibulum dignissim tellus non
          risus. Ut at quam. Etiam ipsum justo, aliquet id, ullamcorper vel, pulvinar at, massa.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
          egestas. Ut molestie ornare dui. Morbi mollis tellus vel quam.
        </p>
      </div>
    </div>
    <div id="right"></div>
  </body>
 
</html>

CSS

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* Global rules */
body{
  height:100%;
  margin:0px;
  padding:0px;
}
 
/* Left column */
#left {
  position:absolute;
  height:100%;
  right:50%;
  padding-left:50%;
  background-color:red;
}
 
/* Middle column (content) */
#center{
  position:absolute;
  width:900px;
  min-height:100%;
  left:50%;
  margin-left:-450px; /* width/2 */
  background-color:pink;
  z-index:1;
}
 
/* Header */
#center #header{
  position:relative;
  height:163px;
  background-color:orange;
}
 
/* Logo */
#center #header #logo{
  position:relative;
  height:163px;
  background-color:yellow;
}
 
#center #header #logo h1,
#center #header #logo h2{
  display:none;
}
 
/* Menu */
#center #header ul{
  position:absolute;
  height:11px;
  top:110px;
  left:350px;
  margin:0px;
}
 
#center #header #menu ul,
#center #header #menu li{
  display:inline;
}
 
#center #header #menu a{
  float:left;
  margin:0px 2px 0px 2px;
  padding:0px 4px 0px 4px;
  color:#E3E3E3;
  text-decoration:none;
  font-size:11px;
  font-weight:bold;
  font-variant:small-caps;
  letter-spacing:1px;
}
 
/* News */
#center #news{
  float:left;
  width:261px;
}
 
/* Right column */
#right {
  position:absolute;
  height:100%;
  right:0px;
  padding-right:50%;
  background-color:blue;
}

Comme on peut le constater, mes div droit et gauche ont pour hauteur maximale la hauteur du navigateur (logique). Hors, j'aimerais qu'ils aient :

une hauteur minimale de 100%
une hauteur maximale correspondante au div central

J'ai tenté l'ajout d'un container global sans succès. Je ne vois plus comment avancer. Quelqu'un aurait une idée ? Merci !

**c_s_s** · 24/11/2008, 11h22

Bonjour,

Si tu avais un fond uni identique à droite et à gauche, la solution serait simple à mettre en place, mais d'après ton exemple, j'imagine que ce n'est pas ce que tu souhaites ?

Les hauteurs à 100% posent toujours problème.

Dans ton cas, tu peux ulisiser :
- une structure associée à des CSS3, qui ne fonctionnera pas sur beaucoup de navigateurs actuels, mais qui serait une bonne solution d'avenir.
- une structure associée à des CSS2, qui fonctionnera partout, saut avec IE (comme par hasard).
- une table à trois colonnes pour gérer la structure de ta page, qui sera compatible avec tous les navigateurs.

**Squaredge** · 24/11/2008, 13h49

Effectivement, les fonds de droite et de gauche sont différents.

Dommage, je vais devoir me rabattre sur une solution non full CSS. J'avais pensé à la table mais j'imaginais que cela était possible par CSS pour tous les navigateurs

J'avais également pensé à un JS qui pourrait étendre la height des 2 colonnes mais ça peut poser des soucis pour ceux n'ayant pas activé le JS ...

**neismarspra** · 24/11/2008, 13h53

bonjours,
je suis pas expert mais sur des problemes proche on m'a conseiller un petit javascript, dont je me suis inspirer:
ici

**neismarspra** · 24/11/2008, 13h57

ben, y'a que sur des pc super proteger par des maniaque qui on trop peurre et qui savent pas proteger leur donner que JS est desactiver, et moi je dit, t'autorise pas les JS, ben tan-pis (meme pour des site comerciaux)

d'ailleur y'a le meme souci pour la difference des navigateurs, c'est un vrai cauchmard, et de temps en temps faut bien trancher pour l'un ou l'autre

**devyan** · 24/11/2008, 14h06

A quoi te servent exactement ces 2 bandes (gauche et droite) ?

Sont-elles destinées à contenir quelque chose ?

S'agit-il uniquement d'afficher un "background" ?

Est-ce que quelque chose comme l'image en pièce jointe conviendrait ?

**Squaredge** · 24/11/2008, 21h19

Les div sur les côtés ne me servent qu'à l'affichage d'un background.
En réalité il me faut :

Un div à gauche et un autre à droite ayant chacun une couleur de fond différente.
Un div central (centré) en px
Une hauteur minimale de 100% et maximale dépendant du div central

L'image que tu me présente pourrait éventuellement convenir ! Satisfait-elle à ces critères ?

Hauteur de div

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager