Question

我正在使用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>

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

Answer 1

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

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

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

<footer>标签本身（以及所有其他新的HTML5标签）不是为了语义目的而进行布局魔术;即为了让那些阅读代码（或更可能是机器人）的人清楚地知道标签内的数据是页脚数据。

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

希望有所帮助。

Answer 2

这可以让你到达目的地:(编辑添加额外的行，以便代码标记显示良好）

基本HTML：

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

这是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;
}

Answer 3

虽然人们建议使用html5shiv，但我也推荐使用modernizr：

http://www.modernizr.com/

也可以看看：

http://html5boilerplate.com/

这将有助于所有浏览器正确呈现您的网站。祝你好运。

Answer 4

您这样做的方式与在HTML4.01中完全相同。

Answer 5

有一个很好的JS可以获得IE的HTML5支持＆lt; 9 ...其他浏览器已经支持HTML5元素。

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

Answer 6

使用<footer>的绝对位置可以正常工作，但是如果您的主要宽度增加时有扩展内容，您将看到问题，或者当您使用检查时，页脚开始悬挂在屏幕中间。不是一个完美的解决方案，但使用固定底部只能解决问题。

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

6 个答案: