CSS の単純さは学習のしやすさにありますが、CSS の難しさはより良い解決策を見つけることにあります。 CSS の世界では、完璧というものは存在しないようです。したがって、今回紹介する CSS は絶対的な最下位であり、私がこれまで見てきた解決策の中で最も完璧な解決策にすぎません。
まず、この CSS 下部レイアウト ソリューションを使用する理由について話しましょう。
ページを作成するとき、ページのコンテンツが非常に小さく、1 つの画面のウィンドウ領域を埋めるのに十分でない場合、通常のレイアウトによれば、下の図のようになります (つまり、下部のコンテンツが配置されていません)ウィンドウの下部にありますが、多くの空白が残ります。
これは、不完全さを求めるデザイナーにとって見苦しいものです。ネット上に解決策がいくつかありますが、ウィンドウの高さを変更すると下部と本文が重なってしまうバグがあります。わざわざ窓の高さを変える人は多くありませんが、デザインは完璧がすべてです。
これは、私が見つけた比較的完璧な方法です。これは、海外のデザイン専門家が純粋な CSS を使用して実現できるものです。テキストのコンテンツが小さい場合、下部がウィンドウの下部に表示されます。ウィンドウの高さを変更しても、重なり合う問題は発生しません。
この CSS を作成した人も、この CSS ボトム レイアウト ソリューションを紹介する Web サイトを立ち上げました。彼が特許を申請したかどうかはわかりません:)
HTMLコード:
注: このレイアウトを使用するための前提条件は、フッターが一般的な div コンテナーの外側にある必要があり、他のすべてのコンテンツは一般的なレイヤーを使用することです。他の兄弟レイヤーを本当に追加する必要がある場合、この兄弟レイヤーは絶対位置決めにposition:absoluteを使用する必要があります。