Problème de hauteur de div et de margin-bottom.

**jdecout** · 22/04/2009, 09h42

Bonjour à tous voila je suis en trin de créer mon site web et j'ai un petit problème je m'explique :

Mon site a une largeur défini ( 1000 px) centré dans le navigateur.

Les haut de page et pied de page sont deux balises externes au conteneur celui si contient 3 autres balises :
- une balise div menu
- une balise contenu
- une balise pub

donc voici mon problème j'aimerai que la hauteur de mon site soit au minimum égale à la hauteur de mon navigateur et que si les éléments contenus dans les balises menu, contenu ou pub sont plus importantes que la hauteur du navigateur, se seront celle ci qui serviront de repère pour la hauteur du site ( la plus grande de l'une de ces trois balises ). J'aimerais aussi qu'en dessous de mon pied de page il y est une marge comme au dessus. Merci pour vos futures réponses.

Voici ma feuille de style :

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
@charset "utf-8";
 
/* CSS Document */
 
html, body 
{              
                margin: 0px;
                padding: 0; 
                height: 100%; 
                background-color:#000000;
}
 
div#hautpage
{
                margin-top: 10px;
                width: 1000px;
                height: 100px;
                background:#000099;
                margin-left: auto;
                margin-right: auto;
}
 
div#conteneur
{ 
                width: 1000px;
                height: 100%;
                background:#0000CC;
                margin-left:auto;
                margin-right:auto;
}
 
div#menu
{
                float:left;
                width: 150px;
                height: 100%;
                background: #0066FF;
}
 
div#pub
{
                float:right;
                width: 150px;
                height: 100%;
                background: #0066FF;
}
 
div#contenu
{
                overflow: hidden;
                height: 100%;
                background: #00CCFF;
}
 
div#piedpage
{
                width: 1000px;
                background-color: #EFEFEF;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 10px;
}

et la mon document php

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
 
<!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">
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="bla" />
<meta name="description" content="blabla/> 
<title>titre</title>
</head>
<body>
 
<!--[if lte IE 6]><style type="text/css">               
div#contenu {
                overflow: visible;
                height: 1%;
}
div#menu{
                margin-right: 7px;
}
div#pub {
                margin-left: 7px;
}              
</style><![endif]-->
 
<div id="hautpage"></div>
<div id="conteneur">
                <div id="menu">menu</div>
                <div id="pub">pub</div>
                <div id="contenu">contenu</div>
</div>
<div id="piedpage">pied de page</div>
 
</body>
</html>

**Macmillenium** · 22/04/2009, 10h24

Bonjour,

Englobe tes blocs dans une div avec un min-height:100%, ensuite petite recherche sur les colonnes factices.
Pour le footer je pense que la meilleure idée serait de le positionner en absolute avec un bottom:0; et un padding-bottom = à la hauteur du footer sur la div global.

Sinon un min-height (pas 100% en tout cas) sur #conteneur peut faire l'affaire aussi mais tu risques d'avoir des soucis de calcul à cause du mixage des unités en % et px.

**jdecout** · 22/04/2009, 11h41

Merci je test ça se soir en rentrant et je vous tien au courant.

**Macmillenium** · 22/04/2009, 11h54

L'idée :

Code xhtml :

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
 
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="title" content="bla" />
		<meta name="description" content="blabla" /> 
		<title>titre</title>
		<style type="text/css">
                        html, body {              
                                margin: 0; padding: 0; 
                                height: 100%; 
                                background-color:#000000;
                        }
                        
                        #global {
                                min-height:100%;
                                width:1000px;
                                margin:10px auto 0;
                                background:url(bg-colonnes-factices.gif) repeat-y;
                                position:relative;
                        }
                        
                        div#hautpage {
                                height: 100px;
                                background:#000099;
                        }
                         
                        div#conteneur { 
                                overflow:hidden;
                                padding-bottom:25px;
                        }
                         
                        div#menu {
                                float:left;
                                width: 150px;
                        }
                         
                        div#pub {
                                float:right;
                                width: 150px;
                        }
                         
                        div#contenu {
                                overflow: hidden;
                        }
                         
                        div#piedpage {
                                position:absolute;
                                bottom:0;
                                width:100%; height:25px;
                                background:#000099;
                        }
                </style>
		<!--[if lte IE 6]>
			<style type="text/css" media="screen">
				#global {
					height:100%;
				}	
				div#contenu {
					zoom:1;
				}
			</style>
		<![endif]-->
	</head>
<body>
 
<div id="global">
 
	<div id="hautpage"> Header </div>
 
	<div id="conteneur">
		<div id="menu">menu</div>
		<div id="pub">pub</div>
		<div id="contenu"><p>contenu</p></div>
	</div>
 
	<div id="piedpage">pied de page</div>
 
</div>
 
</body>
</html>

bg-colonnes-factices.gif (ci-joint

) regroupe les 3 background.

**jdecout** · 22/04/2009, 20h37

Merci pour la hauteur de la page ça fonctionne parfaitement (j'avais entendu parlé de cette méthode sur un autre site) mais pour la marge du bas ça ne marche pas.

*rectification il n'y a que sur google chrome que j'ai une marge en bas.

**Macmillenium** · 22/04/2009, 23h56

Ok, enlève le margin-top:10px sur #global et ajoute un padding-top/bottom directement sur le body :

Code css :

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
 
			html, body {              
				margin: 0; padding:0; 
				height: 100%; 
				background-color:#000000;
			}
 
			body {
				padding:10px 0;
			}
 
			#global {
				min-height:100%;
				width:1000px;
				/* margin:10px auto 0; */
				margin:0 auto;
				background:url(bg-colonnes-factices.gif) repeat-y;
				position:relative;
			}

Problème de hauteur de div et de margin-bottom.

Dimensionnement en CSS

Discussions similaires

Partager

Partager