HTML 5 页脚标签总是在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4154220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 Footer tag be always at bottom
提问by vaibought
I am developing a site in HTML 5. I wrap all my footer content in footer tag. Like code below
我正在用 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>
However above code is not the actual site code as i can not share. Can someone please suggest me the best way to do this in HTML 5 so that it work on all major browsers like IE-6,7,8 / Firefox/ Safari / Crome / Opera
但是，上面的代码不是实际的站点代码，因为我无法共享。有人可以建议我在 HTML 5 中执行此操作的最佳方法，以便它适用于所有主要浏览器，例如 IE-6,7,8/Firefox/Safari/Crome/Opera
回答by Spudley
HTML5's footer tag doesn't magically put the contents at the foot of the page -- you still have to style it just as you always have. In that respect, it works exactly like a <div>, so you should treat it as such by specifying CSS to make it display as intended:
HTML5 的页脚标记并没有神奇地将内容放在页面的底部——您仍然需要像往常一样设置它的样式。在这方面，它的工作方式与 a 完全一样<div>，因此您应该通过指定 CSS 使其按预期显示来处理它：
footer {
//CSS code to make it display at the bottom, same as you would have done for a div.
}
Footers attached to the bottom of the page are known as "Sticky Footers". You can find more info about how to achieve the effect here: http://www.cssstickyfooter.com/
附加到页面底部的页脚称为“粘性页脚”。您可以在此处找到有关如何实现效果的更多信息：http: //www.cssstickyfooter.com/
The <footer>tag itself (along with all the other new HTML5 tags) is not there to do layout magic but for semantic purposes; ie to make it clear to someone reading the code (or more likely a bot) that the data inside the tag is footer data.
该<footer>标签本身（与所有其他新的HTML5标签一起）是不是有做布局魔术，而是语义的目的; 即让阅读代码的人（或更可能是机器人）清楚标签内的数据是页脚数据。
In terms of browser support, all current browsers will allow you to specify the new HTML5 tags except IE, but fortunately all versions of IE (even IE6) can be forced to allow it by including the HTML5Shiv hackin your page.
在浏览器支持方面，当前所有浏览器都允许您指定除 IE 之外的新 HTML5 标签，但幸运的是，所有版本的 IE（甚至 IE6）都可以通过在您的页面中包含HTML5Shiv hack来强制允许它。
Hope that helps.
希望有帮助。
回答by socialmatchbox
This should get you where you are looking to go: (edited to add extra line so that code markup will show good)
这应该会让你找到你想要去的地方：（编辑添加额外的行，以便代码标记显示良好）
The basic HTML:
基本的 HTML：
<footer>
<div class="colwrapper">
<div class="fltcol">col1</div>
<div class="fltcol">col1</div>
<div class="fltcol">col1</div>
</div>
</footer>
Here is the CSS:
这是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;
}
回答by rickyduck
While people are suggesting html5shiv, I recommend using modernizr as well:
虽然人们建议使用 html5shiv，但我也建议使用 Modernizr：
And also maybe take a look at:
也可以看看：
This will help all browsers render your site properly. Good luck.
这将有助于所有浏览器正确呈现您的网站。祝你好运。
回答by Rob
You do this the exact same way you do it in HTML4.01.
您这样做的方式与在 HTML4.01 中完全相同。
回答by albuvee
There is a nice JS to get HTML5-support for IE<9 …?the other Browsers do already support the HTML5-elements.
有一个很好的 JS 来获得对 IE<9 的 HTML5 支持......其他浏览器已经支持 HTML5 元素。
回答by Derya
Using position absolute for <footer>works, but if you have an extending content as your main width grows you'll see the problem, or as you use the inspect, the footer starts hanging in the middle of the screen. Not a perfect solution but using fixed bottom simply resolves the issue.
对<footer>作品使用绝对位置，但是如果随着主宽度的增加而扩展内容，您会看到问题，或者当您使用检查时，页脚开始悬挂在屏幕中间。不是一个完美的解决方案，但使用固定底部可以简单地解决问题。
