HTML 5页脚标记始终位于底部
我正在用HTML5开发一个网站。我把我所有的页脚内容都包在页脚标签里。像下面这样的代码
<!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>然而，上面的代码不是实际的网站代码，因为我不能分享。有没有人能建议我在HTML5中做这件事的最好方法，这样它就可以在所有主流浏览器上运行，比如IE-6,7,8 / Firefox/ Safari / Crome / Opera
回答 6
Stack Overflow用户
发布于 2010-11-11 20:47:32
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来强制这样做。
希望这能有所帮助。
Stack Overflow用户
发布于 2013-11-16 02:28:57
这应该会把你带到你想要去的地方：(编辑后添加额外的行，这样代码标记就会显示出来)
基本的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;
}Stack Overflow用户
发布于 2011-08-04 20:39:24
虽然人们建议使用html5shiv，但我也建议您使用modernizr：
http://www.modernizr.com/
也许还可以看一下：
http://html5boilerplate.com/
这将帮助所有浏览器正确地呈现您的站点。祝好运。
https://stackoverflow.com/questions/4154220
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号