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

发布于 2024-10-02 00:26:50 字数 673 浏览 8 评论 0原文

我正在使用 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 等所有主要浏览器上运行

原文

I am developing a site in HTML 5. I wrap all my footer content in footer tag. Like code below

<!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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上得阳光 2024-10-09 00:26:50

HTML5 的页脚标签不会神奇地将内容放在页面的底部——您仍然需要像往常一样设置它的样式。在这方面，它的工作方式与

完全相同，因此您应该通过指定 CSS 来对待它，使其按预期显示：

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

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

标签本身（以及所有其他新的 HTML5 标签）并不是为了实现布局魔法，而是为了语义目的；即让阅读代码的人（或更可能是机器人）清楚标签内的数据是页脚数据。

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

希望有帮助。

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:

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/

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.

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 hack in your page.

Hope that helps.

回复收藏 0 原文

撩心不撩汉 2024-10-09 00:26:50

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

基本的 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;
}

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:

<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:

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

回复收藏 0 原文