Footer et marges horizontales

**Ceddoc** · 21/06/2012, 13h07

Bonjour,

Un peu de code vaut mieux qu'un grand discours donc voici une représentation schématique de ma page :

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
 
<html>
  <head>
    <meta charset="utf-8" />
	<title>ma page</title>
	<style>
		body {
		 margin: 0;
		}
 
		html, body {
		height: 100%;
		}
 
		/*En tête*/
		#headerdiv {
			width:100%;
			height:6%;
			background-color: red;
			text-align: center;
			padding: 5px 0px;
			color:white;
			font-size: 20;
		}
		#container {
			min-height: 100%;
			margin-bottom: -50px;
			position: relative;
 
		}
 
		#footer {
			font-family: helvetica;
			text-align: center;
			color: white;
			padding: 10px;
			background-color:blue;
			position: relative;
			height:30px;
		}
 
		#clearfooter {
			height: 30px;
			clear: both;
		}
 
		div#contenu {
			background-color:yellow;
			width:92%;
			margin:0 auto;
		}
	</style>
  </head>
 
  <body>
 
	<div id="container">
 
		<div id="headerdiv">
			Mon titre
		</div>
		<div id="contenu">
			Mon contenu
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed arcu non leo vestibulum adipiscing. Suspendisse nec quam eget ante rhoncus posuere eu ac diam. Proin a magna mi. Maecenas leo nulla, ultrices id bibendum quis, euismod eget turpis. Maecenas at ante ac augue luctus luctus. Nam adipiscing, nibh eu mollis eleifend, magna lectus tempus dui, vitae placerat ipsum nisi sit amet ante. Duis tincidunt lacus at tortor eleifend non pharetra elit convallis.
 
			Suspendisse ultrices odio a turpis tempus aliquet. Aliquam malesuada tellus eget justo tempor sed lobortis ante facilisis. Sed faucibus felis at urna consequat pellentesque. In consectetur, augue tincidunt commodo adipiscing, justo orci pharetra leo, vitae ultrices diam nisi ut neque. Nullam non orci purus. Aenean non quam vitae velit volutpat iaculis. Vestibulum sit amet purus magna, id mollis nisl. Aenean viverra arcu quis mauris fringilla aliquet. Sed odio tortor, fringilla quis venenatis id, facilisis vitae tellus. Integer feugiat, eros id tincidunt cursus, odio mauris elementum est, id convallis dui mi tristique ligula. Aenean iaculis porttitor nisl eget euismod. Phasellus congue faucibus purus, ut fermentum libero sollicitudin at. Curabitur quis venenatis mauris. Integer in ante lectus.
 
			Etiam urna urna, tempus at tristique vitae, tristique at libero. Aenean varius, lectus non viverra tempor, risus mi facilisis mauris, varius blandit lorem ipsum ut dui. Suspendisse nec dui nec nisl convallis aliquet ut eu erat. Quisque ut nunc eget mi semper eleifend vitae ac justo. Nunc imperdiet magna eget lacus mattis id commodo felis venenatis. Quisque hendrerit mauris et nisi adipiscing posuere. Aliquam erat volutpat. Praesent molestie, augue sit amet pharetra tincidunt, ipsum mauris consectetur diam, et iaculis diam nisi non est.
 
			Donec eleifend tellus quis urna vulputate sodales. Donec ornare lectus volutpat tellus tempor varius. Aliquam erat volutpat. Nunc hendrerit purus eget justo rhoncus in ornare neque commodo. Donec augue dolor, auctor id convallis sit amet, hendrerit eget tortor. Pellentesque sit amet dui quis tellus pellentesque sempe
		</div>
		<div id="clearfooter"></div>
		</div>
	</div>
 
	<div id="footer">Informations l&eacutegale - Copyright - Notice l&eacutegale - Charte d'utilisation</div>
 
  </body>
 </html>

Mon problème est que j'aimerais que la partie jaune aille jusqu'au footer tout en conservant les deux bandes blanches sur le côté.

Quelqu'un à une idée?

Merci d'avance

**Padmee** · 21/06/2012, 15h24

Bonjour,

Avec une hauteur minimum de 100% pour le #container et une marge pour mettre le #footer correctement, ce dernier cache une partie de #contenu, c'est sans doute pas l'idéal.

Je propose ceci, où la taille du #footer est directement exprimée en % :

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
<style>
		body {
		 margin: 0;
		}
 
		html, body {
		height: 100%;
		}
 
		/*En tête*/
		#headerdiv {
			width:100%;
			height:6%;
			background-color: red;
			text-align: center;
			padding: 5px 0px;
			color:white;
			font-size: 20;
		}
		#container {
			height: 96%;
			margin-bottom: -20px;
			position: relative;
 
		}
 
		#footer {
			font-family: helvetica;
			text-align: center;
			color: white;
			padding: 10px;
			background-color:blue;
			position: relative;
			height:4%;
		}
 
		#clearfooter {
			/*height: 30px;*/
			clear: both;
		}
 
		div#contenu {
			background-color:yellow;
			width:92%;
			margin:0 auto;
			height:90%;
		}
	</style>

**Ceddoc** · 21/06/2012, 15h32

Envoyé par Padmee

ce dernier cache une partie de #contenu,

Il me semble que la taille du clear footer c'était pour éviter ce genre de cas mais j'avais fait un copié collé bête et méchant.

Ta solution me plait bien, je vais tenter de la mettre en place en faisant attention à pas laisser d'espaces.

Je marquerais comme résolu si j'arrive à faire ça comme il faut.

EDIT: c'était pas mal, mais lorsqu'on met beaucoup de contenu (il faudrait donc qu'on scroll, c'est la cata

**Padmee** · 21/06/2012, 15h52

Peut-être faudrait-il rajouter ceci :

Code :

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

1
2
3
		div#contenu {
			overflow:auto;
		}

**Ceddoc** · 21/06/2012, 16h03

J'en deviens assisté, merci ! c'est parfait

**Padmee** · 21/06/2012, 16h13

J'avais peur d'avoir mal compris ce que tu voulais faire (le scroll que sur le contenu ou sur toute la page), tant mieux si c'est bien ça !

Petite remarque sinon, tu as une balise fermante div en trop :

Code :

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

1
2
<div id="clearfooter"></div>
</div>

Footer et marges horizontales

CSS

Vue hybride

Discussions similaires

Partager

Partager