如何使页脚固定在页面底部 [英] How to make a footer fixed in the page bottom

问题描述

在我的html我有一个div分类页脚。我希望它有一个bg到＃000，并占据整个页面的宽度，后面没有空格。

我目前使用这个CSS：

  .footer {
 color：#fff; 
 clear：both; 
 margin：0em 0em 0em 0em; 
 padding：0.75em 0.75em; 
 background：＃000; 
 position：relative; 
 top：490px; 
 border-top：1px solid＃000; 
} 
  

但是整个页面宽度不填充此css代码。 p>

有任何帮助吗？谢谢！

解决方案

我使用粘滞页脚： http://ryanfait.com/sticky-footer/

  * {
 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相同的高度* / 
} 
 
 / * 
 
 Ryan Fait的粘性页脚
 http：// ryanfait.com/ 
 
 * / 
  

Html：

 < div class ='wrapper'> 
 body goes here 
< div class ='push'>< / div> 
< / div> 
< div class ='footer'> Footer！< / div> 
 

基本上，包装器是100％高度，页脚高度为负边距，确保页脚

这应该可以实现你的目标，即拥有一个100％宽的页脚和更窄的主体，因为div是块级元素，它们的宽度默认为其父级的100％。请注意，此处的页脚不包含在封装div中。

In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.

I am currently using this CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

But the full page width isn't filled with this css code.

Any help? Thanks!

解决方案

I use sticky footer: http://ryanfait.com/sticky-footer/

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

/*

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

*/

Html:

<div class='wrapper'>
    body goes here
    <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.

This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.

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