Forum : Je n'arrive pas à aligner mon pied de page en bas.

Bonjour, je suis débutant en développement Web (j'ai vraiment une semaine à mon actif.)
Et j'ai, ce problème que je n'arrive pas à régler malgré pas mal de recherche et de test.

HTML

    </body> 
    <body>
        <footer>
            <p>Test</p>
        </footer>
    </body>

CSS

footer{

    padding: 10px 20px;
    background: #666;
    color: white;
}

Ce que je veux

J'aimerais que le pieds de page s'aligne en bas de la page (comme un vrai pied de page finalement)

Ce que j'obtiens

Le pied de page se met littéralement, en plein milieux de la page.

Bimcode

Salut, pour faire simple il faut soit que tu est déjà du contenu dans ta page, dans ce cas comme là : https://codepen.io/bimcode-repo/pen/gOvGvoN
Soit tu dois mettre ton pied de page en position absolute en bas de page.

popotte

Hello :)

Alors pour commencer dans ton html je vois une fermeture de body en haut, j'espère que tu utilises pas plusieurs balises body? Il n'en faut qu'une seule :X

Ensuite pour ton footer, alors tu peux utiliser la grid ou la flexbox CSS ^^

En gros pour commencer ta balise html et body doivent faire 100% de l'écran:

html {
    height: 100%;
}

body {
    min-height: 100vh
}

Ensuite pour ton footer, tu vas faire un footer collé (en gros il restera en bas de la page comme si c'était un element fixed, jusqu'à ce que le contenu du body le touche et dans ce cas ça va pousser le footer en bas) la méthode la plus simple c'est la flexbox, tu devra modifier un peu ton HTML:

<html>
    <body>
        <main>
            <!-- Tout ton contenu de page se trouvera dans la balise main -->
        </main>

        <footer>
            <!-- Le contenu de ton footer -->
        </footer>
    </body>
</html>

Ensuite coté CSS:

body {
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    flex-shrink: 0;
}

footer {
    flex-grow: 0;
    flex-shrink: 1;
}

Grossomerdo ça devrait être ça

Ton HTML et BODY doivent faire 100% de hauteur d'écran au moins, ensuite tu appliques au BODY un display flex en colonne pour aligner les éléments en colonne sous flexbox, ensuite tu dit que la flex main prendra le max de hauteur, et ton footer prendra ce qui reste ^^

Je n'arrive pas à aligner mon pied de page en bas.

2 réponses