如何强制我的页脚粘在CSS的任何页面的底部？ [英] How can I force my footer to stick to the bottom of any page in CSS?

问题描述

这是我的代码：

  #footer {
 font-size：10px; 
 position：absolute; 
 bottom：0; 
 background：#ffffff; 
} 
  

我不知道这是什么问题 - / p>

编辑：为了更清楚地说明错误：页面加载时，页脚显示在底部。但是，当网页的高度大于屏幕上的尺寸，使得出现滚动条时，页脚停留在同一位置。也就是说，当页面的高度小于等于100％时，页脚位于底部。但是，当页面高度> 100％时，页脚不在页面底部，而是在可见屏幕的底部。

编辑：令人惊讶的是，下面的解决方案没有工作。

解决方案

您可能正在寻找此示例：

 < div class =wrapper > 
您的内容
< div class =push>< / div> 
< / div> 
< div class =footer> 
此处的页脚
< / div> 
  

CSS：

像素页脚

  html，body {
 height：100％; 
} 
 .wrapper {
 min-height：100％; 
 height：auto！important; 
 height：100％; 
 margin：0 auto -142px; / *底部边距是页脚高度的负值* / 
} 
 .footer，.push {
 height：142px; / * .push必须与.footer相同的高度* / 
} 
 
 / * 
 
 Ryan Fait的粘性页脚
 http：// ryanfait.com/ 
 
 * / 
  

This is my code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

I've no idea what is wrong with this - can anyone help?

EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.

EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.

解决方案

You're probably looking for this example:

<div class="wrapper">
    Your content here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS:

For a 142-pixel footer

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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

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