将页脚粘贴到底部在 Chrome 中不起作用(在 IE、Firefox、Safari 中有效) [英] Stick Footer to bottom not work in Chrome (does in IE, Firefox, Safari)

问题描述

在 http://ryanspahn.com/adsgrader2/index 你可以看到我有一个灰色页脚，在 IE、Safari 和 Firefox 中，页脚粘在底部.但在 Chrome 中，它并没有坚持到底——这很奇怪.

At http://ryanspahn.com/adsgrader2/index you can see I have a grey footer and in IE, Safari and Firefox the footer sticks to the bottom. But in Chrome it is not sticking to the bottom - which is odd.

我使用堆栈上的以下方法创建了这个粘性页脚...... CSS 使 HTML 页面页脚以最小高度留在页面底部.

I created this sticky footer using the following method found here on stack ...... CSS to make HTML page footer stay at bottom of the page with a minimum height.

我想知道是否有人以前见过这个，或者有没有建议解决这个 Chrome 问题.

I wonder if anyone has seen this before and or has a suggestion to fix this Chrome issue.

推荐答案

我不确定那个教程，但如果你想让你的页脚留在底部，你需要使用固定定位而不是相对定位.固定意味着当页面的其余部分滚动时它不会滚动.您可以使用 top、bottom、left、right 在绝对定位时使用相同的属性锚定它.

I'm not sure about that tutorial but if you want your footer to stay at the bottom you need to use fixed positioning not relative. Fixed means that it will not scroll when the rest of the page scrolls. You can anchor it with the same attributes at absolute positioning using top, bottom, left, right.

将以下内容添加到您现有的 css 中，并在必要时更改值.

Add the following onto your existing css, and change values where necessary.

#footer {
     position: fixed;
     bottom: 0px;
     width: 100%;
}

#foot {
    margin: 0px auto;
}

我还注意到，当您执行此操作时，您必须将页脚中的图片向左浮动.

I also noticed that when you do this you'll have to float the image you have in the footer left.

#right img {
    float: left;
}

这篇关于将页脚粘贴到底部在 Chrome 中不起作用(在 IE、Firefox、Safari 中有效)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！