Trois div de même hauteur

**Guillaume.S** · 13/11/2009, 17h35

Bonjour,

Je vous expose plus bas mon problème :

Cahier des charges :

Puisque qu'un schéma vaut mieux que de longues explications :

Donc comme on le voit, j'aimerais avoir :

3 colonnes
Celle de droite et de gauche contiendront une image se repétant verticalement, elles font 50px de large et prennent au minimum 100% de la fenêtre
Le contenu contiendra tous les autres éléments du site (articles, banniere, footer, menus, ...) et fait donc 100% de la page avec une marge à droite et à gauche de 50px (donc 100% - 100px plus exactement) et prend au minimum 100% de la fenêtre
Les 3 colonnes doivent avoir la même hauteur

Bord gauche :

Bord droit :

Réalisation :

1. Les poupées russes

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html>
	<head>
		<style type="text/css">
                        html, body
                        {
                                margin:auto;
                                font-size:12px;
                                height:100%;
                                font-family: Verdana, Helvetica, Arial, sans-serif;
                        }
                        #page
                        {
                                background:url("../bord_gauche.png") repeat-y;
                                min-height:100%;
                        }
                        #page_bis
                        {
                                background:url("../bord_droit.png") repeat-y top right;
                                min-height:100%;
                        }
                        #contenu
                        {
                                margin:0px 50px;
                                background-color:#8B99FF;
                                min-height:100%;
                        }
                </style>
	</head>
	<body>
		<div id="page">
			<div id="page_bis">
				<div id="contenu">
					<script language="javascript">
					<!--
						for(var i=0; i<50; i++)	document.write('Blabla<br />');
					//-->
					</script>
				</div>
			</div>
		</div>
	</body>
</html>

Problèmes :

Sur Opera ça marche nickel, quand le texte ne fait pas arriver la fenêtre à 100%, elle y arrive quand même grâce à la propriété "min-height:100%"
Avec IE et Firefox, le même problème : lorsque la page dépasse les 100%, tout marche nickel mais lorsque le div contenu fait moins de 100% de la page, la 1ère colonne arrive à 100% mais pas les autres

2. Le tiercé gagnant

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html>
	<head>
		<style type="text/css">
                        html, body
                        {
                                margin:auto;
                                font-size:12px;
                                height:100%;
                                font-family: Verdana, Helvetica, Arial, sans-serif;
                        }
                        #page
                        {
                                background:url("../bord_gauche.png") repeat-y;
                                position:absolute;
                                width:50px;
                                min-height:100%;
                        }
                        #page_bis
                        {
                                background:url("../bord_droit.png") repeat-y top right;
                                position:absolute;
                                width:50px;
                                min-height:100%;
                                right:0;
                        }
                        #contenu
                        {
                                margin:0px 50px;
                                background-color:#8B99FF;
                                min-height:100%;
                        }
                </style>
	</head>
	<body>
		<div id="page">
		</div>
		<div id="page_bis">
		</div>
		<div id="contenu">
			<script language="javascript">
			<!--
				for(var i=0; i<70; i++)	document.write('Blabla<br />');
			//-->
			</script>
		</div>
	</body>
</html>

Problèmes :

Sur les 3 navigateurs, tant que le design prend moins de 100% de la page ça va, mais dès que ça dépasse les 100%, le div contenu descend alors que les deux div de droite et de gauche ne bougent pas.

Conclusion :

Manifestement, je ne cherche pas dans la bonne direction. Si toutefois vous voyiez une solution ou des remarques, je vous serais reconnaissant de me les faire connaître.

Merci d'avance pour votre patience et votre réponse

**CCyrillus** · 13/11/2009, 18h25

bonsoir,

si le rendu que tu souhaite est pour l'ensemble de la page (bord de la fenetre de ton navigateur) , tu peut simplifier les choses et limiter l'heritage du height:100%; à html, body , puis appliqué le min-height : 100% au conteneur global (ainsi qu'un min-width par la même occasion).

Je te propose de tester ceci :

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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head><title>HTML 4.01 </title>
<style type='text/css'>
html , body {background:url(http://img263.imageshack.us/img263/652/bordgauche.png) repeat-y 0 0 ;
margin:0;padding:0;height:100%;
}
body {padding-left:50px;min-width:800px;}
 
#page {
min-height:100%;
height:auto!important;
height:100%;
background:url(http://img690.imageshack.us/img690/3832/borddroit.png)  right repeat-y #DDDDDD;
padding-right:50px;
}
#contenu {border:1px solid;}</style><script type='text/javascript'>  testh ='auto';
  function hauteur ()  {
  if (testh  =='auto' ) {
 testh='1600px'} 
  else 
  {testh = 'auto' }
return testh;
  }
</script></head>
<body>
		<div id="page">
			<div id="page_bis" >
				<div id="contenu" onclick ="  this.style.height=hauteur();">
Clique moi donc pour passer ma hauteur de 1600px a auto et vice versa .
				</div>
			</div>
		</div>
</body></html>

il faut appliquer une premiere bordure a html et body sur la gauche (ou droite selon le sens d'affichage du site ) puis la seconde sur un premier élément en min-height.

Se passer de html revient a se mordre la queue , le 100% de body sera appliqué comme limite d'affichage et body ne supporte pas le min-height .

Il y a assez peu de soluce via les styles en fait .

GC

edit , un min-height ne transmet aucune valeur aux enfants . Ton premier exemple ne peut fonctionner , Autrement dit , un min-height requiert un height explicite du parent. (CSS n'est pas dynamique)

**Guillaume.S** · 13/11/2009, 18h56

Ben écoute, tout d'abord merci d'avoir essayé et merci d'avoir réussi ^^

Même si j'ai pas tout saisi, ça marche et c'est un plaisir (faut dire que ça fait plusieurs mois que je travaille sur ce type de design et que j'abandonne pour les raison suscités).

Voilà, merci encore ^^

PS : Et sympa la fonction JS, ça se voit que t'as de la bouteille

Trois div de même hauteur

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager