HTML 5页脚标记始终位于底部

vai*_*ght 19 html html5 sticky-footer

我正在开发HTML 5的网站.我将所有页脚内容包含在页脚标记中.像下面的代码

<!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>
Run Code Online (Sandbox Code Playgroud)

但是上面的代码不是我无法分享的实际站点代码.有人可以建议我在HTML 5中执行此操作的最佳方法,以便它适用于所有主流浏览器,如IE-6,7,8/Firefox/Safari/Crome/Opera

Spu*_*ley 36

HTML5的页脚标签并没有神奇地将内容放在页面底部 - 您仍然需要像往常一样对其进行样式设置.在这方面,它的工作方式与a完全相同<div>,因此您应该通过指定CSS使其按预期显示来对待它:

footer {
   //CSS code to make it display at the bottom, same as you would have done for a div.
}
Run Code Online (Sandbox Code Playgroud)

附在页面底部的页脚称为"粘滞页脚".您可以在此处找到有关如何实现此效果的更多信息:http://www.cssstickyfooter.com/

<footer>标签本身(与所有其他新的HTML5标签一起)是不是有做布局魔术,而是语义的目的; 即为了清楚某人阅读代码(或更可能是机器人),标签内的数据是页脚数据.

在浏览器支持方面,所有当前浏览器都允许您指定除IE之外的新HTML5标签,但幸运的是,IE的所有版本(甚至IE6)都可以通过在页面中包含HTML5Shiv hack来强制允许它.

希望有所帮助.