CSSを使用してページの高さを動的に変更すると、ページの一番下にフッターが表示されます

Question

ページの下部にフッターを保存するソリューションがたくさんあります。しかし、私はそれを働かせるために苦労しています。

問題は、ページが動的に高さを変更できることです。

the current solution I'm usingの場合、フッターはページの下部にあります。しかし、ページの高さが動的に変化すると、フッターは正確な位置にとどまります。以下のようにフッタの

CSSは次のとおりです。

#footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

htmlとbodyタグは以下のルールを持っている：

html, body { 
    min-height: 100%; 
    height: 100%; 
} 

視覚的なデモについては以下を参照してくださいスニペット（フルウインドウモードに最適）

$(document).ready(function() { 
 
    
 
    var button = $("#addContent"); 
 
    var lorem = "<p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p>"; 
 
    
 
    button.click(function() { 
 
    
 
    $("main button").before(lorem); 
 
    
 
    }); 
 
    
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background: #333; 
 
    color: #fff; 
 
    padding: 25px; 
 
} 
 

 
main { 
 
    padding: 25px; 
 
} 
 

 
main h3 { 
 
    margin-top: 0; 
 
} 
 

 
code { 
 
    background: #f1f1f1; 
 
    padding: 0 5px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    background: #ededed; 
 
    padding: 25px; 
 
    color: #000; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header> 
 
    <p>Just a sample header</p> 
 
</header> 
 

 
<main> 
 
    <h3>Some sample content</h3> 
 
    <p>Click on the <code>button</code> to see what i mean.</p> 
 
    <p>When the <code>heigth</code> of the page dynamically changes, the <code>footer</code> will stay at its exact position.</p> 
 
    <button id="addContent">Click to add more content</button> 
 
</main> 
 

 
<footer> 
 
    <p>The footer</p> 
 
</footer>

どのようにCSSは高さが変更を知らせることができますか？そして、そのがウィンドウの下に滞在していることを代わりに文書の下でそのフッターを維持するには？

Answer 1

最初にposition: absoluteを使用する場合は、親はposition: relativeのように最初の位置であるか、相対位置にある最初の親要素を探す必要があります。したがって、position: relativeをbodyに追加すると、フッターは動的になります。

しかし、この場合には、それは他の要素の上に重なりますので、絶対位置の要素が完全に、文書の流れから削除されますが、私たちは、あなたが持っているだろう最後にそうtransform: translateY(100%)

を追加した場合、我々は解決することができます：

body { 
    margin: 0; 
    position: relative; 
} 

footer { 
    position: absolute; 
    background: #ededed; 
    padding: 25px; 
    color: #000; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    transform: translateY(100%); 
}