Bonjour à tous.
Je viens vers vous car je rencontre un petit problème de positionnement concernant mon footer.
Tout d'abord voici un shéma graphique de mon site. :
Le code associé :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<a href="#" class="logo">
...
</a>
<nav class="menu">
...
</nav>
</header>
<section>
<div class="slider">
<div class="slider-img">
...
</div>
<div class="slider-content">
...
</div>
</div>
</section>
</div> <!-- ici la fermeture de la class "container" -->
<footer class="footer">
<div class="container">
<div class="footer-copyright">
...
</div>
<ul class="footer-menu">
...
</ul>
</div>
</footer>
</body>
</html>.container {
margin: 0 auto;
width: 1170px;
position: relative;
}
/***********************************
************** FOOTER **************
************************************/
.footer {
background-color: #283645;
bottom: 0;
position: absolute;
width: 100%;
}
.footer-copyright { float: left; }
.footer-menu {
float: right;
}Ce code fonctionne partiellement. En fait sur ma page d'accueil, le footer est placé (casi) au milieu de ma page. Sur les autres pages, il est bien collé en bas. A noter que la page d'accueil est la seule page à avoir un scroll.
Voici un screenshot de la page d'accueil :
Une idée ?
Merci beaucoup.
19 réponses
C'est tout le problème de réaliser un sticky-footer (comme l'a bien mentionné @betaWeb).
Pour le créer, je propose de faire comme suit :
<html>
<head></head>
<body>
<footer></footer>
</body>
</html>html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: ...px; box-sizing: border-box; }
footer { position: absolute; bottom: 0; }Tu peux ainsi te passer du div.wrap selon moi.
Englobe ton site avec une <div class="wrap"> </div>, et mets lui une position relative.
exemple
Merci pour vos réponses, cependant j'ai toujours le même problème.
@Ramzz : J'ai appliqué une min-height: 100% sur mon html et body, rien ne change.
@Benjamin : Là aussi, aucune différence. Sur ma page d'accueil le footer se retrouve en plein milieu de ma page, sur les autres pages (contact & portfolio (= peu de contenu)) le footer se colle bien en bas du navigateur.
En fait j'ai l'impression que mon footer se comporte comme s'il était en position: fixed. Quand j'inspecte mon code directement via le navigateur, mon footer vient se coller au dessus de l'inspecteur, chose qui n'est normalement pas possible sans cette position fixed.
Je sais plus trop où regarder. :s
EDIT : j'ai temporairement upload mon projet (HTML + CSS donc). Ce sera toujours plus simple pour vous que d'avoir des choses abstraites. http://steve-lorraine.fr/lorem
Merci encore !
eu... ton footer est en position absolute là ... enlève lui et tu verra qu'il sera collé en bas
Bonsoir.
Il y a une chose que j'ai du mal à comprendre.
Pourquoi tiens-tu que le footer soit plus large que le reste de la mise en page du site ?
Normalement la largeur du footer n'est pas censé dépasser celle du reste de la mise en page du site (telle que le header par exemple).
Le fait que le header et le footer puissent être plus larges que le contenu n'est pas gênant en sois, mais que seul le footer soit plus large que le reste, l'est par contre.
@Benjamin : Justement, sans la position absolute, le footer ne colle pas le bas de la page sur les pages portfolio et contact. Etant donné que ma class "wrap" est en position relative, j'ai voulu mettre mon footer en absolute.
@Lartak : C'est juste le background qui est plus large que le reste du site, le contenu est toujours aligné sur le reste du site. Et je trouve ça largement plus esthétique.
le container tu peut y fixer une height et un overflow scroll du coup seul le contenu scroll et pas le footer
Je ne peux pas définir de height sur mon container étant donné qu'elle est différente d'une page à l'autre. Si je la met à 1000 sur l'accueil, la répercussion sur la page portfolio et contact sera ridicule.
Edit : J'ai déjà essayé le height: auto, en vain.
si tu defini tes composant comme sur une interfaces mobile non. Tu veut que ton footer reste visible tous le temps c'est bien ca?
Qu'est ce que tu entends par "comme sur un interface mobile" ? Sinon oui, le footer doit-être visible.
Salut,
Il faut soit prendre la solution proposée par @Benjamin Derepas : enlève simplement le position: absolute; et ça sera bon ;)
J'avoue qu'avoir un sticky-footer c'est assez chiant des fois.
Salut LorraineS,
Ton footer doit bien être en position absolute. Mais il faut bien comprendre le système de position.
La position absolute positionne l'élément par rapport au premier parent ayant une position relative. Si aucun parent n'a cette propriété, c'est la balise html qui est prise en compte.
Dans ton cas, il n'y a pas de position relative. Et la hauteur de la balise html est de 100%. Ça explique cette variation du footer à l'affichage de la console.
Pour résoudre ton problème, ajoute simplement une position relative à ta balise body.
@Tralala8 Non, il a un div.wrap qui englobe son contenu qui est déjà en position relative. Et puis en corrigeant simplement le positionnement de son footer en suivant les indication de @Benjamin Derepas, le problème devrait être réglé.
@betaWeb Le div.wrap n'est pas un parent du footer. C'est pourquoi le footer ne se positionne pas bien.
Concrètement, je procède comme ceci pour mes footer :
<html>
<head></head>
<body>
<footer></footer>
</body>
</html>html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: ...px }
footer { position: absolute; bottom: 0; }
@Tralala8 Autant pour moi.
@lorraineS Suis les conseils de @Benjamin Derepas, je pense que ça sera le plus simple.
Merci pour votre aide.
J'ai suivi le conseil de Benjamin en ajoutant une class wrap qui englobe mon contenu, mais ça ne fonctionne pas. Si j'enlève la position: absolute à mon footer, celui-ci vient se placer après mon contenu mais pour les pages portfolio et contact, il reste placé au milieu de l'écran.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="container">
<header class="header">
...
<nav class="menu">
...
</nav>
</header>
<section class="section">
<div class="intro">
<h1>
...
</h1>
</div>
</section>
<section class="section">
<div class="wrapper">
<div class="slider">
<div class="slider-img">
...
</div>
<div class="slider-content">
...
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="bloc bloc-service wrapper">
...
</div>
<div class="bloc bloc-service wrapper">
...
</div>
<div class="bloc bloc-service wrapper">
...
</div>
</section>
</div> <!-- fin container -->
<footer class="footer">
<div class="container">
<div class="footer-copyright">
...
</div>
<ul class="footer-menu">
...
</ul>
</div>
<div class="clear"></div>
</footer>
</div> <!-- fin wrap -->
</body>
</html>
.wrap {
position: relative;
}
.footer {
background-color: #283645;
width: 100%;
}J'ai upload ce que j'ai fait pour que vous puissiez avoir un retour visuel : [steve-lorraine.fr/lorem]()
Merci encore !
Merci Tralala8, ça fonctionne. Je ne connaissais pas la propriété box-sizing: border-box, je vais faire quelque recherche dessus.
Merci à tous pour votre aide. ;)