ページの下部にフッターを置いておきますか？

Question

これはよくある問題ですが、私はこれを解決できません。どのように多くの設定を組み合わせても、ページの下部にはフッターが残りません。それはそれ以外のものの下に座るだけです。

body { 
    margin: 0; 
    background-color: #ACFAB7; 
} 

# container { 
    margin: 0 auto; 
    padding: 40px; 
} 

#header { 
    z-index: 0; 
    height: 78px; 
    background-color: #2ecc71; 
} 

#footer { 
    z-index: 2; 
    height: 40px; 
    width: 100%; 
    padding: 0px; 
    position: relative; 
    background-color: #2ecc71; 
    /*display required to center text*/ 
    display: table; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

#image { 
    z-index: 1; 
    margin: 20px auto; 
    padding: 50px; 
} 

/*Centers text within the header*/ 
span { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 1

あなたは多くの問題があります。このソリューションは、

• ページの末尾にフッターを固定します。
• 内容を（縦と横の両方に）センタリングする。

修正

• がdisplay: tableを取り除きます。
• width: 100%を取り除く。
• relativeからfixedに変更してください。

#footer { 
 
    z-index: 2; 
 
    line-height: 40px; 
 
    padding: 0px; 
 
    position: fixed; 
 
    background-color: #2ecc71; 
 
    text-align: center; 
 
    left: 0; right: 0; 
 
    bottom: 0; 
 
}

<div id="footer">Copyrights.</div>

Answer 2

あなたはposition: fixed; bottom: 0を使用することができます。

#footer { 
 
    z-index: 2; 
 
    height: 40px; 
 
    width: 100%; 
 
    padding: 0px; 
 
    background-color: #2ecc71; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position:fixed; 
 
    bottom:0; 
 
    left: 0; 
 
}

<div> 
 
    <footer id="footer">Footer</footer> 
 
</div>

Answer 3

position: fixed;とbottom: 0;はトリックを行う必要があります。幅と高さを必要に応じて追加します。

.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: aquamarine; 
 
}

<div style="background-color: lightgrey;height: 800px"> 
 
    Page content 
 
</div> 
 
<div class="footer"> 
 
    this is the footer 
 
</div>