Page 1 sur 1
Comment positionner le pied de page?
Publié : 19 janv. 2009, 07:39
par Endor
Bonjour,
J’aimerais savoir comment faire pour que le pied de page reste dans le bas de la page même si celle-ci est vide ou presque.
Merci pour votre aide,
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022)
Publié : 19 janv. 2009, 12:35
par GAUNCE
Le pied de page est le dernier div de la page.
Tu donnes au div précédent une hauteur suffisante pour qu'il maintienne ton pied de page en bas...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Publié : 19 janv. 2009, 13:31
par chinon37
Gaunce, c'est une solution très approximative puisque les écrans ne font pas tous la même hauteur.
On va partir du principe que Endor connait l'utilisation des css
Soit une page de cette construction:
Code : Tout sélectionner
<body>
<div id="conteneur">
<h1 id="titre">
</h1>
contenu
<p id="dernierparagraphe">
</p>
<div id="piedpage">pied de page</div>
</div>
</body>
on va créer une feuille css avec ces règles:
Code : Tout sélectionner
body {
margin: 0;
padding: 0;
height: 100%;
}
div#conteneur {
position: relative;
width: 70%;
margin: 0 auto;
min-height: 100%;
}
div#piedpage {
position: absolute;
bottom: 0; left: 0;
width: 100%;
}
div#page #dernierparagraphe {
padding-bottom: *hauteur du pied de page*;
}
On donne une hauteur de page de 100%, avec un minimum de 100% pour le conteneur.
Attention, pour IE, qui ne reconnait pas les propriétés min et max, il faudra ajouter un commentaire uniquement lisble par IE:
Code : Tout sélectionner
<!--[if lte IE 6]>
<style type="text/css">
div#conteneur {
height: 100%;
}
</style>
<![endif]-->
On positionne le pied de page en absolu avec une largeur de 100%.
Au dernier bloc précédent le pied de page, on donne un espacement en bas de bloc égal à la hauteur du pied de page, pour que ce dernier vienne se caler en bas de l'écran.
Publié : 19 janv. 2009, 20:33
par Endor
Je n’y arrive pas.
Quelle est la *hauteur du pied de page* dans ton exemple?
Si je donne une hauteur au pied de page et que je donne le même espacement en bas du dernier bloc précédent le pied il se place par-dessus le conteneur et non au bas de la page.
Merci
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022)