Footer en bas de page

**ForgetTheNorm** · 02/08/2011, 16h46

Bonjour à tous

Je m'essaye à la conception Web, et me heurte à quelques problèmes.

Je cherche à réaliser un design simpliste, constitué de 3 parties :
- un header
- un container principal
- un footer.

Je cherche à instaurer le fait que le footer soit toujours situé en bas de page, quelque soit la hauteur du container principal.

Mes premiers tests m'ont fait réaliser un design qui fonctionne, où les 3 containers se suivent bien, mais le footer n'est pas en bas de page.

Mon second test, à base de DIV flottants, fonctionnent lorsque le container principal n'est pas plus haut que la hauteur maximale du navigateur. En effet, lorsque je descend la barre de défilement verticale, le footer reste au même endroit dans la page, et se place au dessus du container principal.

Avez-vous un exemple simpliste à me conseiller ? J'ai cherché des templates existants, mais j'ai l'impression que le footer situé toujours en bas de page n'est pas courant.

Merci

Pierre

**ForgetTheNorm** · 02/08/2011, 18h35

Je m'auto-répond, puisque j'ai trouvé une réponse convenable.

Pour ceux que ça interesse, voici le code source !

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>*Footer*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
html, body {
        height: 100%;
        margin:0;
        padding:0;
}
body {
        margin: 0;
        padding: 0;
        font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#mainContainer {
        position: relative;
        min-height: 100%;
        background-color:#fafafa;
        background-image: url('background.png');
        background-repeat: repeat-x;
}
#headerContainer {
        position: absolute;
        top: 0;
        padding: 0;
        background-color: #30373d;
        color: #fff;
        width:100%;
        height:100px;
}
#header{
        margin:0 auto;
        width:900px;
}
#content {
        margin:0 auto;
        padding: 0px;
        background-color: #ffffff;
        padding-bottom: 50px;
        padding-top: 100px;
        width:900px;
}
#footerContainer {
        position: absolute;
        bottom: 0;
        padding: 0;
        background-color: #30373d;
        color: #fff;
        width:100%;
        height:50px;
}
#footer{
        margin:0 auto;
        width:900px;
}
-->
</style>
</head>
 
<body>
	<div id="mainContainer">
		<div id="headerContainer">
			  <div id="header">
 
				<h1>Header</h1>
		          </div>
		</div>
		<div id="content">
			<h1>Content</h1>
			<p>Redimensionnez votre fenÃªtre pour observer comment se comporte votre pied de page 100% CSS.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum arcu. Nulla eros eros, mattis et, dictum quis, convallis vel, mauris. Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id justo. Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu, cursus a, posuere sed, sollicitudin in,
justo. Pellentesque enim lacus, egestas ut, elementum eu, molestie vel, urna. Integer quam. Phasellus tempor. Sed commodo porttitor justo. Vestibulum rhoncus lacinia pede. Aliquam lectus velit, auctor a, fermentum a, accumsan et, neque.</p>
 
		</div>
		<div id="footerContainer">
			<div id="footer">
				Footer<br/>blabla
		        </div>
		</div>
	</div>
</body>
</html>

Pierre

Footer en bas de page

Discussions similaires

Partager

Partager