どのように私のフッタを底にくっつけることができますか？

Question

ほとんどのコンテンツがページの下部に貼り付けられるようにするにはどうすればよいですか？

CSSで

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

Answer 1

：

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

：

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 3

私は個人的に、私はその時々見つけたよう

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

を使用したいですサイトは雑踏に行きます - 特にまでは、画面上にすべてがうまくフィットしているにもかかわらず、ときどき底の厄介な水平スクロールバーで挨拶されることがあります。 CSS使用

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>