27402 sujets

CSS et mise en forme, CSS3

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