我怎样才能让我的页脚粘在底部？

Question

如何让我的页脚粘在几乎没有内容的页面底部？

<footer>
<hr>
<p> &copy; 2017 Sindre Berge <p>
</footer>

Answer 1

在CSS中：

footer{
  position:fixed;
  bottom:0;
  text-align: center;
  width: 100%;
}

或者您可以将其内联：

<footer style="position:fixed; bottom:0; text-align: center; width: 100%;">
<hr>
<p> &copy; 2017 Sindre Berge <p>
</footer>

Answer 2

我个人喜欢用

footer{
  position:absolute;
  bottom:0;
  width: 99%;
}

正如我发现的那样，有时网站会变得混乱——尤其是就 width 而言，就其本身而言，有时我会在底部看到一个令人讨厌的水平滚动条，尽管一切都很好地适合屏幕。

Answer 3

使用CSS：

<style> 
footer {
    width:100%;
    position: fixed;
    bottom: 0px;
    text-align: center; /* This line is not needed but centers your text */
    }
</style>

<footer>
    <hr>
    <p> &copy; 2017 Sindre Berge <p>
</footer>

在此处查看并试用它：https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP

或尝试 Sam 提出的 flex 解决方案。这不会导致页脚不总是在浏览器视图的底部，而是在页面的底部。

弹性解决方案：

.flex-container {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*I give height 700px but can be adapted to a body being 100%*/
    height:700px;
    background:#cccccc;
    }

.flex-content {
      -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background:#ca33aa;
    height:100px;
    }

<div class="flex-container">
  <div class="flex-content">
This is my footer
  </div>
  </div>

Answer 4

块解决方案：

footer {
display:block;
position:fixed;
bottom:0;
}

弹性解决方案：

.flex-container {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*I give height 700px but can be adapted to a body being 100%*/
    height:700px;
    background:#cccccc;
    }

.flex-content {
      -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background:#ca33aa;
    height:100px;
    }

<div class="flex-container">
  <div class="flex-content">
This is my footer
  </div>
  </div>

我怎样才能让我的页脚粘在底部？

How can i make my footer stick to bottom?

html

css

footer

twitter-bootstrap-3