ページの下部まで押されたフッター

ページの下部にあるフッターを押してください。良いフォームだと思います。 多くの解決策を検討した結果、それらはすべていくつかのハックに基づいており、コードに挿入する大量のゴミが必要であることがわかりました。 追加の要素を必要とせず、すべてのブラウザーで安定して動作するシンプルなJavaScriptベースのソリューションを提案します。



必要なのは、特別なスクリプトを添付し、 ndra-containerクラスをストレッチされる要素に割り当てることだけです。 できた！



例を見る







押されたフッターのあるページは次のようになります。

< html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

1. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
6. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   
7. < html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .
   
   
   
   

< html > < body > < div > </ div > < div class ='ndra-container' > </ div > < div > </ div > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

スクリプトは、フッターがページの下部に収まるように、コンテンツでブロックを拡大します。 スクリプトはブロックの高さを毎秒チェックし、ウィンドウのサイズ変更にすばやく応答します。 すべてのブラウザで動作します。 使用:)スクリプト自体のコードは次のとおりです。

1. $（ 関数 （）{
3. $（ "body" ）.css（{padding：0、margin：0}）;
4. var f = function （）{
5. $（ ".ndra-container" ） .css （{position： "relative" }）;
6. var h1 = $（ "body" ）.height（）;
7. var h2 = $（window）.height（）;
8. var d = h2-h1;
9. var h = $（ ".ndra-container" ）.height（）+ d;
10. var ruler = $（ "<div>" ）.appendTo（ ".ndra-container" ）;
11. h = Math.max（ruler.position（）。top、h）;
12. ruler.remove（）;
13. $（ ".ndra-container" ）.height（h）;
14. };
15. setInterval（f、1000）;
16. $（ウィンドウ）.resize（f）;
17. f（）;
19. }）;

*このソースコードは、 ソースコードハイライターで強調表示されました。