如何让页脚停留在网页的底部？ [英] How do you get the footer to stay at the bottom of a Web page?

问题描述

我有一个简单的2列布局，一个页脚清除我的标记中的右和左div。我的问题是，我不能得到页脚留在页面的底部在所有浏览器。如果内容推动页脚下来，它工作，但并不总是这样。

更新：

它在Firefox中无法正常工作。当页面上没有足够的内容将页脚一直推到浏览器窗口底部时，我在页脚下方看到一条背景颜色。不幸的是，这是页面的默认状态。

解决方案

粘贴页脚 Google ：

1. 有一个< div>




2. 右之前

   / strong> 包装器的结束< / div> 将
   < div class =push>< / div>




3. > 包装器的结束< / div> 将
   ; div class =footer>< / div>






< lang-css prettyprint-override> * {
margin：0;
}
html，body {
height：100％;
}
.wrapper {
min-height：100％;
height：auto！important;
height：100％;
margin：0 auto -142px; / *底部边距是页脚高度的负值* /
}
.footer，.push {
height：142px; / * .push必须与.footer相同高度* /
}





I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.

Update:

It's not working properly in Firefox. I'm seeing a strip of background color below the footer when there's not enough content on the page to push the footer all the way down to the bottom of the browser window. Unfortunately, this is the default state of the page.

解决方案

Sticky footer on Google:

1. Have a <div> with class="wrapper" for your content.

2. Right before the closing </div> of the wrapper place the <div class="push"></div>.

3. Right after the closing </div> of the wrapper place the <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

这篇关于如何让页脚停留在网页的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！