ヘッダー付きの固定フッター

Question

ヘッダーも使用しているときに、どのように固定フッターを作成しますか？

スティッキーフッターの使用方法を説明するサンプルがたくさんあります。 余分な要素が必要なものもあれば、そうでないものもあります。私は余分な要素を必要とせず、私のヘッダーで作業したものを見つけることができませんでした。

どうやってこれを行うのですか？

Answer 1

これを理解するにはしばらく時間がかかりました。

コードペン：http://codepen.io/JodanWise/pen/apewWP

、それはあまりにもヘッダーで動作しますので、 https://css-tricks.com/snippets/css/sticky-footer/

は、いくつかの小さな変更を加えた：あなたは、ヘッダーを持っている場合

この例に基づいて、それは動作しません。

この中

html, body { 
 
    height: 100%; 
 
} 
 

 
* { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    // position + z-index to show header on top of content 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: yellow; 
 
    height: 40px; 
 
} 
 

 
.content { 
 
    background-color: orange; 
 
    min-height: 100%; 
 
    // margin and padding top to compensate for the header 
 
    margin-top: -40px; 
 
    padding-top: 40px; 
 
    // margin bot to leave room for the footer 
 
    margin-bottom: -60px; 
 
} 
 

 
// This keeps the content from flowing over the footer 
 
.content:after { 
 
    content: " "; 
 
    display: block; 
 
    height: 60px; 
 
} 
 

 
.footer { 
 
    background-color: red; 
 
    height: 60px 
 
}

<div class="header"> 
 
    This is the header. 
 
</div> 
 
<div class="content"> 
 
    This is the content.<br> 
 
    This is the content.<br> 
 
    This is the content.<br> 
 
    This is the content.<br> 
 
    This is the content.<br> 
 
    This is the content.<br> 
 
    This is the content. 
 
</div> 
 
<div class="footer"> 
 
    This is the footer. 
 
</div>