如何让我的页脚粘到底部？

Question

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

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

Answer 1

CSS中的

：

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

或者你可以内联它：

<div class="img_div">

<?php $media = get_attached_media( 'image', $post->ID );
if(! empty($media)){
foreach ( $media as $attachment ) {
    $full = wp_get_attachment_url( $attachment->ID );
    echo '<img class="image-2" data-fancybox="images" src="'.$full.'" alt="'$attachment->post_title'" />';
  }
 }
?>
</div>

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解​​决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

阻止解决方案：

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

Flex解​​决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;