Problème pour mettre le footer en bas de la page

17 octobre 2018 à 12:27:47

Bonjour, j'ai un problème mon footer n'est pas en bas de la page et ne veut pas se fixer en bas de la page, quelqu'un sait comment faire ?

Merci d'avance

voici mon code :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>NA</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <header>
            <h1>Bienvenue</h1>
        </header>
        <div class="topsection">
            <button class="inscription_accueil">S'inscrire</button>
        </div>

        <footer>
            <h1>NEW ALEXANDRIA</h1>
        </footer>
    </body>
</html>

@font-face {
    font-family: 'K2DThin';
    src: url('K2D-Thin.ttf') format('ttf');
}

ul {
    list-style: none;
}

* {
    font-family: 'K2DThin', Arial, Helvetica, sans-serif;
}


/* PARAMETRE CSS DE SELECTION D'ELEMENT */
*::selection {
    background-color: rgb(255, 100, 10);
    color: white;
}

p {
    display: flex;
    
}

/* Corps de la page */
body {
    margin: 0;
    padding: 0;
}

header {
    background: linear-gradient(rgb(85, 85, 85), rgb(17, 17, 17));
}

/* Pied de la page */
footer {
    background: blue;
    color: white;
    height: 150px;
    margin: 0;
    bottom: 0;
    position: relative;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(rgb(85, 85, 85), rgb(17, 17, 17));
    align-items: center;
}

/* Bouton d'inscrire sur la page d'accueil */
.inscription_accueil {
    height: 80px;
    background-color: rgb(255, 100, 10);
    width: 300px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    color: white;
    font-size: 50px;
}

h1 {
    color: white;
}

SébastienGRENIER3

17 octobre 2018 à 13:14:56

La balise footer est un élément sémantique de HTML, pas la garantie d'un fonctionnement particulier.

Techniquement, footer se comporte comme un élément de type bloc normal, donc une div.

Dans ta page, pour que ton header se place en bas, il faut que tu t'assures que le conteneur dans lequel se trouve ta balise footer ait une hauteur correspondant à 100% de la place disponible.

La structure globale de ton document HTML est la suivante :

body
=> header
=> div
=> footer

Donc le conteneur de ton footer est le body. Si le body n'est pas dimensionné pour faire 100% de la hauteur, alors ton footer se place quelque part au milieu, collé sous ta DIV principale, celle-ci étant de hauteur de 80px puisque le seul élément qu'elle contient est un bouton dont la hauteur est forcée à 80px, aux marges et padding prêt.

Pour obtenir ton résultat, tu dois positionner et dimensionner ton body et forcer sa hauteur, puis positionner ton footer en bas de ton body.

Il y a plusieurs possibilités pour cela, soit via FLEX, soit via des attributs CSS classiques (position et height notamment)

Je te laisse chercher la solution sur la base de ces infos avant de te donner tout ;o)

me_moi

17 octobre 2018 à 20:20:02

Bonjour,

Beaucoup de gens veulent mettre leur footer en bas de page car c'est un peu ce que le mot "footer" laisse entendre. Mais le but de la balise footer est seulement d'y placer des informations additionnelles comme un menu secondaire, des informations de contact, copyright, etc...

Mettre le footer en bas de page laisse un grand vide au milieu dans les pages qui ont peu de contenu. Tous les sites dignes de ce nom - ex: openclassrooms - ne mettent pas le footer en bas de page mais le laissent tel quel.

Laisser le footer à son emplacement naturel ou le positionner au bas de l'écran fait une grande différence par rapport à l'eye tracking.

-
Edité par me_moi 18 octobre 2018 à 20:15:06

Lucky13

17 octobre 2018 à 20:25:07

Hello,

Voici la solution :

-> https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible

-
Edité par Lucky13 17 octobre 2018 à 20:27:34

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS