页脚不会停留在底部。 [位置：绝对;不工作]

本文介绍了页脚不会停留在底部。 [位置：绝对;不工作]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在使页脚停留在页面底部时遇到问题。它的底部高出大约120px。绝对位置不起作用，我不希望它被修复。我需要使用jQuery还是可以修复它？

CSS code：

。 footer_home3 { border-top：1px solid＃111; 背景：＃171717; 身高：80px; 宽度：100％; 位置：绝对; bottom：-2px; margin：0px; box-shadow：0px 0px 10px 2px black; $ / code>

HTML代码：

< div class =footer_home3> < p class =footer_text>& copy;版权所有2014（即将推出）。保留所有权利。< / p> < ul class =footer_ul> < li class =footer_li>< a href =＃>关于& nbsp;& nbsp; - < / a>< / li> < li class =footer_li>< a href =＃>常见问题解答& nbsp;& nbsp; - < / a>< / li> < li class =footer_li>< a href =＃>论坛& nbsp;& nbsp; - < / a>< / li> < li class =footer_li>< a href =＃>联系我们& nbsp;& nbsp; - < / a>< / li> < li class =footer_li>< a href =＃>服务条款& nbsp;& nbsp; - < / a>< / li> < li class =footer_li>< a href =＃>隐私政策< / a>< / li> < / ul> < / div>

• DEMO： jsfiddle/NsQhD/
• DEMO FULLSCREN结果： jsfiddle/NsQhD/embedded/result/

解决方案

我怀疑这更符合你的要求;当内容较短时，页脚将保留在底部，但当内容长于窗口时，页脚将位于页面的末尾。

HTML ：

< div class =wrapper> 标题，内容在这里。 < div class =bumper>< / div> < / div> < footer>页脚！< / footer>

CSS：

html，body {height：100％; } .wrapper {min-height：100％; 身高：auto！important; 身高：100％; margin：0 auto -55px; / *页脚高度负值* / } .bumper {height：55px; } / *页脚高度* / 页脚{height：55px;宽度：100％; }

（例如： codepen.io/stg/pen/Kbrjl ）

I'm having problems with getting the footer to stay on the bottom of the page. Its around 120px above the bottom. Position absolute is not working and i don't want it to be fixed. Do i need to use jQuery or can css fix it?

CSS code:

.footer_home3 { border-top: 1px solid #111; background: #171717; height: 80px; width: 100%; position: absolute; bottom: -2px; margin: 0px; box-shadow: 0px 0px 10px 2px black; }

HTML code:

<div class="footer_home3"> <p class="footer_text">&copy; Copyright 2014 by (Comming soon). All Rights Reserved.</p> <ul class="footer_ul"> <li class="footer_li"><a href="#">About &nbsp;&nbsp;-</a></li> <li class="footer_li"><a href="#">FAQ &nbsp;&nbsp;-</a></li> <li class="footer_li"><a href="#">Forum &nbsp;&nbsp;-</a></li> <li class="footer_li"><a href="#">Contact Us &nbsp;&nbsp;-</a></li> <li class="footer_li"><a href="#">Terms of Service &nbsp;&nbsp;-</a></li> <li class="footer_li"><a href="#">Privacy Policy</a></li> </ul> </div>

• DEMO: jsfiddle/NsQhD/
• DEMO FULLSCREN RESULT: jsfiddle/NsQhD/embedded/result/

解决方案

I suspect this is more in line with what you're looking for; the footer will stay in place at the bottom when the content is short, but will be positioned at the end of the page when the content is longer than the window.

HTML:

<div class="wrapper"> Header, content goes here. <div class="bumper"></div> </div> <footer>Footer!</footer>

CSS:

html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -55px; /* negative of footer height */ } .bumper { height: 55px; } /* footer height */ footer { height: 55px; width: 100%; }

(Example: codepen.io/stg/pen/Kbrjl)