19

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

4

6 回答 6

37

HTML5 的页脚标签不会神奇地将内容放在页面的底部——您仍然需要像往常一样设置它的样式。在这方面，它的工作原理与 a 完全一样<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 标签）不是用来做布局魔术的，而是为了语义目的；即让阅读代码的人（或更可能是机器人）清楚标签内的数据是页脚数据。

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

希望有帮助。

于 2010-11-11T12:47:32.490 回答
4

这应该可以让您到达您想要去的地方：（编辑以添加额外的行，以便代码标记显示良好）

基本的 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;
}
于 2013-11-15T18:28:56.797 回答
2

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

http://www.modernizr.com/

也可以看看：

http://html5boilerplate.com/

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

于 2011-08-04T12:39:23.903 回答
0

您执行此操作的方式与您在 HTML4.01 中执行此操作的方式完全相同。

于 2010-11-11T12:13:27.010 回答
0

有一个很好的 JS 可以为 IE<9 获得 HTML5 支持……其他浏览器确实已经支持 HTML5 元素。

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

于 2010-11-11T12:13:48.030 回答
0

对作品使用绝对位置<footer>，但是如果随着主宽度的增加而扩展内容，您会看到问题，或者当您使用检查时，页脚开始挂在屏幕中间。不是一个完美的解决方案，但使用固定底部可以简单地解决问题。

于 2016-03-23T17:08:43.647 回答