web-dev-qa-db-fra.com

Balise HTML 5 Footer toujours en bas

Je développe un site en HTML 5. J'emballe tout mon contenu de pied de page dans une balise footer. Comme le code ci-dessous 

<!DOCTYPE html>

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

Cependant, le code ci-dessus n'est pas le code du site actuel, car je ne peux pas le partager. Quelqu'un peut-il me suggérer de me suggérer le meilleur moyen de le faire en HTML 5 afin que cela fonctionne sur tous les principaux navigateurs comme IE-6,7,8/Firefox/Safari/Crome/Opera

htmlhtml5sticky-footer
19
vaibought

Le pied de page de HTML5 ne place pas comme par magie le contenu au bas de la page - vous devez toujours le styler comme vous l'avez toujours fait. À cet égard, il fonctionne exactement comme un <div>. Vous devez donc le traiter comme tel en spécifiant CSS pour qu'il s'affiche comme prévu:

footer {
   //CSS code to make it display at the bottom, same as you would have done for a div.
}

Les pieds de page attachés au bas de la page sont appelés «pieds collants». Vous trouverez plus d’informations sur la manière d’atteindre cet effet ici: http://www.cssstickyfooter.com/

La balise <footer> elle-même (avec toutes les autres nouvelles balises HTML5) n'est pas là pour faire de la magie de la présentation, mais à des fins sémantiques; c'est-à-dire qu'il est clair à une personne qui lit le code (ou plus probablement à un bot) que les données à l'intérieur de la balise sont des données de pied de page.

En termes de support de navigateur, tous les navigateurs actuels vous permettront de spécifier les nouvelles balises HTML5 sauf IE, mais heureusement, toutes les versions de IE (même IE6) peuvent être obligées de l'autoriser en incluant le HTML5Shiv hack dans votre page.

J'espère que cela pourra aider.

36
Spudley

Cela devrait vous amener où vous voulez aller: (édité pour ajouter une ligne supplémentaire pour que le balisage de code montre bien)

Le HTML de base: 

<footer>
    <div class="colwrapper">
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
    </div>
</footer>

Voici le CSS:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: #949494;
    color: #ffffff;
}

.colwrapper{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

/* Specify a 40 pixels gap between the columns: */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

/* Specify the width, style and color of the rule between columns: */

-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
4
socialmatchbox

Alors que les gens suggèrent html5shiv, je recommande également d’utiliser modernizr: 

- http://www.modernizr.com/

Et aussi peut-être jeter un oeil à:

http://html5boilerplate.com/

Cela aidera tous les navigateurs à rendre votre site correctement. Bonne chance.

2
rickyduck

Vous faites cela exactement de la même manière que dans HTML4.01.

0
Rob

Il existe un Nice JS pour obtenir le support HTML5 pour IE <9… les autres navigateurs supportent déjà les éléments HTML5.

https://code.google.com/p/html5shiv/#

0
albuvee

L'utilisation de position absolute pour <footer> fonctionne, mais si le contenu est étendu au fur et à mesure que votre largeur principale augmente, vous verrez le problème ou si vous utilisez l'inspection, le pied de page commence à être accroché au milieu de l'écran. La solution n'est pas parfaite, mais l'utilisation d'un fond fixe résout simplement le problème.

0
Derya