別のフッター。 可変高、ブロックレイアウト、JSオプション

ページの下部にフッターを釘付けする作業は、頭からつま先までbeatられます。 高さが固定されたフッターに適しています。 しかし、フッターの高さがその内容に依存する場合、多くの方法はありません。 または、これは明らかなjavascriptソリューションです。 または、元々そのためのものではない、この要素への適合。 もちろん、 テーブルについてです。 欠点もあるメソッド（以下のすべてについて）を提供したいと思いますが、これらの欠点は異なっているため、最初の2つが適していない人には適しているかもしれません。



開始点として、固定フッターを釘付けする方法が必要です。 1つの要素を100％引き伸ばし、フッターの高さに等しい下からマージンを噛む方法は、margingが一度設定され、動的に変更できないため機能しません。 したがって、ワークピースは、ボディを100％引き伸ばして位置を示す方法になります。 フッターはここに絶対に配置されるため、ボディの端に固定されます。 テキストをクロールしても、コンテンツに追加のインデントが付与されません（この場合、セクション要素ですが、これは重要ではありません）。



この例では、フッターからサイズの明示的な指示を削除し、そこにテキストを詰め込み、 JSなしでブロック要素に底に固定された可変高さのフッターを取得できます 。 しかし、すべてが非常に単純な場合、記事はありません。 このようなフッターは、高さが変化するためコンテンツを閉じますが、コンテンツの下端からのインデントはありません。



そして、2番目のフッターが助けになります！ 2番目のフッターは、コンテンツの下にウィンドウの下部境界線を押して、最初のフッターがそこに収まるようにするために必要です。 これを行うには、最初のフッターとまったく同じスタイルを使用する必要があり（特に追加されたものを除く）、最初のフッターのコンテンツを完全に複製する必要があります。 ただし、ユーザーに表示する必要はありません。



したがって、 タスクは完了します。 ただし、このメソッドの欠点は明らかです。htmlコードの成長、seoに対する悪影響、両方のブロックでコンテンツが同じであることを確認する必要があります。 したがって、別の変更を提案します。サーバーではなく、javascriptを使用するクライアントでフッターを複製する必要があります。 上記のjavascriptメソッドとの基本的な違いは、このメソッドではjavascriptがページの読み込み時にのみ必要なことです。 計算を実行せず、サイズを考慮しません。



最終バージョン 。



残念ながら、最終バージョンを準備する過程で、ie6は認識していないタグのコンテンツを複製しないため、$（「フッター」）であることが判明しました。 タグをdivに置き換える必要がありました。