如何使页脚固定在页面底部

在我的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代码。

任何帮助？ 谢谢！

Answer 1

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

 /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ * { 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 */ } 

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

Answer 2

你可以使页脚绝对的页面是这样的：

 .footer { position:absolute; bottom:0px; width: 100%; margin: 0; background-color: #000; height: 100px;/* or however high you would like */ } 

Answer 3

我在网页的每个部分使用了几个DIV元素。

 <div id="tplBody"> <div id="tplHeader"> ... </div> <div id="tplContent"> ... </div> <div id="tplFooter"> ... </div> </div> 

每个部分都相对定位。 使用包装的DIV ，我可以设置包装一个特定的宽度，其中的元素可以是100%宽度。

我build议你摆脱绝对定位和浮动，因为他们创build兼容性问题，所以可能无法在所有浏览器上正确显示。

Answer 4

如果你想让你的页脚固定在你的页面上：

 .footer{ position:fixed;} 

但是如果你想让页脚固定页尾：

看到了

Answer 5

我很高兴你提供的支持，每一个这样的答复帮助我不知何故。 我来到这个代码：

 .footer { height: 59px; margin: 0 auto; color: #fff; clear: both; padding: 2em 2em; background: #000; position: relative; top: 508px; } 

谢谢！

Answer 6

当我开始使用Bootstrap菜单并固定页脚而不考虑浏览器分辨率的Web应用程序时，我遇到了这个问题。

使用下面的脚注元素的样式

线内风格

在Div中使用class属性的外部样式表

  <div class="footer"></div> 

style.css文件

  .footer { backgroud-color:black; position:fixed; bottom:0; height:2%; } 

在Div中使用id属性的外部样式表

  <div id="divfooter"></div> 

style.css文件

  #divfooter { backgroud-color:black; position:fixed; bottom:0; height:2%; } 

Answer 7

您可以在CSS中使用这些样式来实现您的目标

 .footer{ background-color: #000; min-width: 100%; height: 100px; bottom:0; position: fixed; } 

如果您使用引导程序尝试使用margin-left：-15px和margin-right：-15px，但在大多数情况下，当您拥有自己的类时，将不需要这样做。

Answer 8

HTML：

 <div class="footer"> <p> Some text comes here! &copy; 2015 - 2017 </p> </div> 

CSS：

 .footer { width: 100%; height: auto; text-align: center; background: rgb(59, 67, 79); position: fixed; bottom: 0%; margin-top: 50%; } * { padding: 0; margin: 0; }