如何在页面底部固定页脚

Question

在我的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>

基本上，包装器的高度为100％，页脚的高度为负边距，确保页脚始终位于底部而不会导致滚动。

这应该实现你的目标，即拥有100％宽度的页脚和更窄的主体，因为div是块级元素，并且它们的宽度默认为其父级的100％。请记住，这里的页脚不包含在包装div中。

Answer 2

你可以将页脚div绝对地设置为页面，如下所示：

.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>

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

我建议你避开绝对定位和浮动，因为它们会产生兼容性问题，因此可能无法在所有浏览器上正确显示。

Answer 4

如果你想在你的页面上修改你的页脚：

.footer{ position:fixed;}

但如果您希望页脚固定在页面末尾：

see that

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;
}

如果您正在使用bootstrap尝试使用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;
}