Page 1 sur 1
Une div en guise de footer
Posté : 11 sept. 2011, 19:04
par foetus69
Bonjour,
Je cherche le moyen de pousser, coller, contraindre une div à se placer en bas de page quelque soit le navigateur, la résolution...
C'est possible ? J'ai essayé de mettre l'height du body à 100% mais ca marche pas.
Merci de votre aide.
Re: Une div en guise de footer
Posté : 11 sept. 2011, 20:56
par Cyrano
Bonjour,
Je cherche le moyen de pousser, coller, contraindre une div à se placer en bas de page quelque soit le navigateur, la résolution...
C'est possible ? J'ai essayé de mettre l'height du body à 100% mais ca marche pas.
Merci de votre aide.
La seule solution passe par du JavaScript en mesurant la hauteur de la fenêtre, en plaçant le bloc en question par rapport à cette mesure et en veillant à ce qu'il reste collé en bas lorsqu'on fait monter le contenu avec la barre de défilement vertical (scroll). La propriété « height » n'est pas prise en compte en pur CSS sur l'élément body.
Re: Une div en guise de footer
Posté : 12 sept. 2011, 11:13
par foetus69
Bonjour Cyrano,
Merci, oui en effet ça marche du tonnerre ton truc.
J'ai trouvé ça aussi après coup, mais il ne faut pas que le contenu principal soit trop long sinon ca passe sous le footer ^^
http://forum.alsacreations.com/topic-4- ... -page.html
Bisous
Re: Une div en guise de footer
Posté : 12 sept. 2011, 11:39
par Cyrano
... mais il ne faut pas que le contenu principal soit trop long sinon ca passe sous le footer ^^
Tu peux facilement résoudre ce soucis en ajoutant via CSS un padding de la hauteur de ton div à appliquer sur le body : comme ton footer est en position absolue, ça ne l'affectera pas dans son positionnement, mais le body étant « plus long », la barre de défilement sera adaptée de façon à te permettre de faire monter le contenu complètement au dessus de ce footer
.
Re: Une div en guise de footer
Posté : 16 sept. 2011, 16:32
par foetus69
Bonjour,
Comme ceci ?
<!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" />
<title>Document sans nom</title>
<style>
body{
padding-top: 2000px;
}
div#page {
position: absolute;
top: 0px;
left: 0px;
min-height: 100%;
width: 100%;
}
div#header {
width: 100%;
color: #FDFDFD;
border-bottom: solid 1px #000000;
background-color : #787889;
}
div#content {
margin : 10px 100px 10px 100px;
padding: 0 1.5em 1.5em 0;
min-height: 100%;
font-size: 0.9em;
background-color: #FDFDFD;
}
div#footer{
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
clear: both;
color: #FDFDFD;
border-top: solid 1px #000000;
background-color : #787889;
}
</style>
</head>
<body>
<div id="page">
<div id="header">Header contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader content</div>
<div id="content">Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage con</div>
<div id="footer">Footer contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contet</div>
</div>
</body>
</html>
J'ai un doute...
Re: Une div en guise de footer
Posté : 16 sept. 2011, 16:35
par Cyrano
C'est pour le bas de la page, donc padding-bottom et non padding-top
