28172 sujets

CSS et mise en forme, CSS3

Coller footer en bas de page

Bonjour à tous,

J'ai un petit souci avec mon site : je n'arrive pas à coller mon footer en bas de ma page web.
Je sais que ce problème a déjà été posé de nombreuses fois sur divers forums mais je ne trouve pas la solution correspondante à mon problème.
Pour être plus clair, je ne souhaite pas que mon footer soit tout le temps en bas de ma fenêtre navigateur comme avec un 

position: fixed;
bottom: 0;


mais je souhaite que le footer soit bien en bas de page web, câd qu'il soit invisible lorsque l'on se trouve en haut de page et qu'il y a du contenu mais qu'il reste bien en bas si on scroll et qu'on agrandit la fenêtre au delà de la taille du contenu.

Pour que ce soit concret, voici l'adresse de mon site.
Vous pouvez donc voir sur la page d'accueil que le footer est bien en bas de page si vous avez un écran style 13', mais dans le cas d'un écran plus grand si vous agrandissez la fenêtre, le footer se retrouve en plein milieu de la page et ne reste pas collé au bas de la page web.

Voilà, j'espère que vous pourrez m'aider à résoudre mon souci.
Bonjour,
tout d'abord il faut attribuer une hauteur de 100% au html et body, ensuite pour le footer

position: absolute;
bottom: 0;
width: 100%;


Pour le bloc précédant le footer (sortie du flux), un padding-bottom d'au moins la hauteur du footer.
Et enfin pour le bloc parent du footer : 
#bloc {
position: relative;
min-height: 100%;
}
Merci pour ta réponse.
J'ai essayé mais quand je rajoute ces lignes de code, mon footer gagne un bon 1000px de hauteur et je n'arrive ensuite pas à modifier cela.

Pour que cela soit plus clair, voici le code CSS de mon body et footer :


.wrapper {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  width: 940px;
}
html, body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
}
body a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
body p {
  margin-bottom: 21px;
}




/* FOOTER ------------------------------------------------------------*/
footer {
  font-size: 11px;
}

/* FOOTER BOTTOM ------------------------------------------------------------*/
.footer-bottom {
  padding-top: 30px;
  padding-bottom: 30px;
  overflow: hidden;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.footer-bottom .left {
  width: 50%;
  padding-top: 10px;
  float: left;
}
.footer-bottom .right {
  width: 50%;
  float: right;
}

Modifié par PoX (08 Apr 2013 - 09:40)
Bonjour,

J'utilise cette méthode qui consiste à créer une DIV (push) dont la hauteur sera celle du footer (valeur reportée aussi sur le margin-bottom du wrapper), à vous de voir:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto 142px; 
}
.footer, .push {
	height: 142px; 
}
.footer {
	margin: 0 auto;
	position: relative;
	width: 700px;
	height: 142px;
	background-color: salmon;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="header"> </div>
  <div class="push"></div>
</div>
<div class="footer"> </div>
</body>
</html>

Modifié par rodolpheb (10 Apr 2013 - 16:42)
Sujet clos
Aller à