28111 sujets

CSS et mise en forme, CSS3

[Résolu] Pousser le footer

Kikoo,
Est-ce qu'une âme charitable pourrait m'aider à pousser mon footer dans cette mise en page et que le content prenne toute la hauteur ?

Voici mon HTML
<body>
<div id="page">
<div id="header">header</div>
<div id="content">content</div>
<div class="push"></div>
<div id="footer">footer</div>
</div>
</body>


et le CSS
html, body { text-align:center; height:100%; margin: 0; }
#page { width:990px; background-color:#333; color:#FFF; margin:0px auto; min-height:100%; }
#header { background-color:#666; color:#FFF;}
#content { background-color:#999; color:#FFF; margin:0px auto; margin-bottom: -50px; }
.push { height: 50px; }
#footer { background-color:#000; color:#FFF; margin:0px auto; height: 50px; }


Merci pour votre aide !

Claire
Modérateur
Bonjour,

On peut par exemple ajouter au css
#page { position:relative; }
#footer { position:absolute;bottom:0;left:0;right:0; }


Il y aura éventuellement d'autres adaptations à faire si le contenu a besoin de plus de 100% de la taille disponible.

Amicalement,
Bonjour,

Si vous voulez aussi que votre footer ne soit pas toujours présent il existe au moins trois autres techniques, en display table, flex, ou grid. L'idée est toujours la même : on assigne une valeur minimale aux html/body de 100% (ce que vous avez fait), ou au moins un 100vh au body, puis on demande à la colonne principale de prendre toute la place restante. Voici pour flex :
.content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

Du coup vous pourrez supprimer le mic-mac avec le .push et les 50px en plus ou en moins.

Un exemple en ligne : CodePen, flex layout
Modifié par Olivier C (14 Jan 2021 - 08:46)
Bonjour et merci pour votre soutien.
En effet parsimonhi avec ce code le contenu passe sous le footer si celui-ci est plus grand que la hauteur de la page.
Comment faire ?
Claire
Modérateur
Bonjour,

Il faudrait préciser les choses.

Quand le contenu est trop grand, le footer doit-il quand même continuer d'apparaitre en bas de la fenêtre du navigateur, ou bien est-il repoussé pour n'apparaitre qu'en fin de contenu (quand on fera un scroll par exemple) ?

La balise <div class="push"> peut-elle être supprimée ? Ou bien sert-elle à autre chose ?

Amicalement,
Oui j'aimerai bien qu'il suive le contenu et qu'il soit toujours en bas en gardant la largeur de ma div page et non de l'écran. Je ne sais pas si je suis clair(e) enfin si ^^
Le push c'était pour tester la valeur négative.
S'il n'y a pas d'utilité on peut le supprimer, c'était une technique que j'avais essayé (vu sur un autre article) mais le footer prend toute la largeur de la page :\
Merci grandement de te soucier de ma problématique.
Claire
Modérateur
Bonjour,

Si j'ai bien compris ton besoin, ceci devrait faire l'affaire (j'ai modifié pas mal de trucs, et en particulier j'ai ajouté un box-sizing:border-box; sur l'élément #page).

html, body { text-align:center; height:100%; margin:0; padding:0; }
#page { width:990px; background-color:#333; color:#FFF; margin:0 auto; }
#header { background-color:#666; color:#FFF;}
#content { background-color:#999; color:#FFF; }
#footer { background-color:#000; color:#FFF; }
#page { box-sizing:border-box; position:relative; padding-bottom:50px; min-height:100%; }
#footer { position:absolute; bottom:0; left:0; right:0; height:50px; }

Le code important est dans les deux dernières lignes.

EDIT: et il faut retirer la balise de classe "push" bien sûr

Amicalement,
Modifié par parsimonhi (14 Jan 2021 - 13:36)
Modérateur
Bonjour,

Une solution avec du flex :
html, body { text-align:center; height:100%; margin:0; padding:0; }
#page { width:990px; background-color:#333; color:#FFF; margin:0 auto; }
#header { background-color:#666; color:#FFF;}
#content { background-color:#999; color:#FFF; }
#footer { background-color:#000; color:#FFF; }
#page { min-height:100%;display:flex;flex-direction:column; }
#header { flex:0; }
#content { flex:1; }
#footer { flex:0;min-height:50px; }


@Olivier C: je n'ai pas réussi à faire marcher ta proposition. Je n'ai pas compris comment la mettre en oeuvre.

EDIT: @Olivier C: finalement, pour ta proposition, c'est bon, j'ai vu (il fallait changer le html, ce que je n'avais pas fait)

Amicalement,
Modifié par parsimonhi (14 Jan 2021 - 14:29)
Meilleure solution
upload/1624624199-83267-footer-en-bas-de-page.jpg

Voici un article qui pourrait intéresser ceux qui souhaitent toujours avoir un footer en bas de page. Deux techniques y sont abordées.

La première, déjà énoncée dans les réponses précédentes, concerne l'usage du flexbox CSS. Néanmoins, l'approche est un peu différente dans cet article.

Notez qu'il est également possible d'utiliser une technique plus récente qui repose sur le Grid CSS.

En espérant que cet article contribuera à aider les lecteurs de ce poste.
Modifié par RemiG (25 Jun 2021 - 14:32)
Modérateur
RemiG a écrit :
upload/1624624199-83267-footer-en-bas-de-page.jpg

Voici un article qui pourrait intéresser ceux qui souhaitent toujours avoir un Deux techniques y sont abordées.

La première, déjà énoncée dans les réponses précédentes, concerne l'usage du flexbox CSS. Néanmoins, l'approche est un peu différente dans cet article.

Notez qu'il est également possible d'utiliser une technique plus récente qui repose sur le Grid CSS.



Bonjour , ces deux technique que tu présentes , en positionnant 3 éléments les uns sur les autres vont effectivement pouvoir être monté indifféremment avec grid ou flex et même display:table. ( https://codepen.io/gc-nomade/pen/WNjeGbQ ) Cependant ces 2 là (3) ont des particularité et des usages différent. pour flex et grid : voir ou revoir https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
pour le display:table, c'est anecdotique.

Quand au montage avec un contenu central lui même composé de plusieurs colonnes, il est dommage que l'article que tu proposes ne l'évoque pas, . (pour body{height:100%}, il faut html,body{height:100%} pour que la hauteur du viewport soit prise en compte par, et hérité de html).
Pour cette histoire de colonne centrale et un affichage en pleine page tu peut voir les derniers exemple sur https://re7net.com/article/grid-et-flex-leurs-differences qui tentent eux aussi de montrer les différences de ces deux modèle de boites , bien visible dans le cas d'un pied de page calé au plus bas de la page. Ceci écrit, ton exemple fonctionne ici pour la question en n’impliquant qu'une simple colonne.

Cordialement

P.S. ne sachant pas trop comment prendre ton intervention, j'ai opté pour la commenter et compléter un peu vu qu'elle est en plein dans le sujet et que la frontière entre flex et grid est généralement floue, bonne continuation.
Sujet clos
Aller à