1. Accueil
  2. Question et réponse
  3. HTML 5 Balise de bas de page toujours en bas

HTML 5 Balise de bas de page toujours en bas

2010-11-11 8 views
19

Je développe un site HTML 5. J'enveloppe tout le contenu de mes pieds de page dans l'étiquette de bas de page. Comme le code ci-dessousHTML 5 Balise de bas de page toujours en bas

<!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 de site réel que je ne peux pas partager. Quelqu'un peut-il me suggérer la meilleure façon de le faire en HTML 5 afin qu'il fonctionne sur tous les principaux navigateurs comme IE-6,7,8/Firefox/Safari/Crome/Opera

Source

2010-11-11 vaibought

Répondre

36

balise de bas de page de HTML5 ne met pas comme par magie le contenu au pied de la page - vous avez encore à dénommer comme vous l'avez toujours. À cet égard, il fonctionne exactement comme un <div>, vous devriez donc le traiter comme tel en spécifiant CSS pour faire afficher comme prévu:

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

Footers attaché au bas de la page sont connus comme « Sticky Footers » . La balise <footer> elle-même (avec toutes les autres balises HTML5) n'est pas là pour faire de la magie de mise en page mais à des fins sémantiques; c'est-à-dire pour faire comprendre à quelqu'un qui lit le code (ou plus probablement un bot) que les données à l'intérieur du tag sont des données de pied de page. En termes de support du navigateur, tous les navigateurs actuels vous permettront de spécifier les nouvelles balises HTML5 sauf IE, mais heureusement, toutes les versions d'IE (même IE6) peuvent être forcées de l'autoriser en incluant le HTML5Shiv hack dans votre page.

Espérons que ça aide.

Source

2010-11-11 12:47:32 Spudley

+0

Merci beaucoup Spudley. Ce lien a fonctionné pour moi. Maintenant, je suis heureux. J'imaginais que dans la révolution HTML, il pourrait y avoir une bonne solution fournie par la communauté des développeurs HTML, mais contrairement à mes attentes, ils ne l'ont pas fait. Mais votre lien est très utile pour moi. Merci – vaibought

+1

Après quelques expérimentations, je suis arrivé à trouver que quand il s'agit d'utiliser la solution de cssstickyfooter.com combiné avec le hack HTML5Shiv il y a un petit problème avec les directions. Pour le pied de page collant ils vous disent d'ajouter ce qui suit à votre entête: " nlinus

0

Vous le faites exactement de la même manière que vous faites-le en HTML4.01.

Source

2010-11-11 12:13:27 Rob

+0

Ya je l'ai fait mais je ne trouve pas de poste suffisant qui fonctionne dans mon cas. pouvez-vous s'il vous plaît me suggérer un joli poste – vaibought

4

Cela devrait vous où vous êtes à la recherche d'aller: (sous la direction d'ajouter une ligne supplémentaire de sorte que le balisage de code indique bien)

Le code 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; 
}

Source

2013-11-15 18:28:56 socialmatchbox

0

utilisant la position absolue pour <footer> fonctionne, mais si vous avez un contenu s'étendant votre largeur principale grandit, vous verrez le problème, ou que vous utilisez le inspectez, la fo oter commence à se suspendre au milieu de l'écran. Ce n'est pas une solution parfaite, mais l'utilisation d'un fond fixe résout simplement le problème.

Source

2016-03-23 17:08:43 Derya

Questions connexes

 Questions connexes