固定高さのヘッダーとフッターを除いて、Div を本体の高さ 100% に設定するにはどうすればよいですか?

固定高さのヘッダーとフッターを除き、Div を本体の高さ 100% に設定する

CSS により、Web ページのレイアウトをエレガントに制御できます。一般的な要件の 1 つは、固定高さのヘッダーとフッターが占めるスペースを除き、コンテンツを本体の高さの 100% で表示することです。この効果を実現するには、ブラウザ間の互換性を確保するための綿密な CSS 実装が必要です。

確実な解決策の 1 つは、HTML と本文を min-height: 100%; に設定し、ページが可能な限り拡張されるようにすることです。次に、ヘッダーとフッターの高さに対応するために、絶対位置とパディングを使用してラッパー div を作成する必要があります。このラッパー内では、#content div を min-height: 100%; に設定して、残りのスペースを埋めることができます。

ヘッダーとフッターが固定されたままになるようにするには、margin-top: -50px; に設定します。マージンボトム: -50px;が適用され、ラッパーに追加されたパディングを効果的に無効にします。これらの負のマージン値は、ヘッダーとフッターをラッパー div の外側に押し出し、コンテンツの上下に浮いているかのような錯覚を与えます。

この手法は、最新のブラウザーだけでなく、Internet Explorer 8 でも機能することがテストされ、証明されています。 Modernizr を使用します (Modernizr が使用できない場合は、ヘッダー要素とフッター要素を単純に div に置き換えます)。さらに詳しく説明するには、実際の例を含むコード スニペットを利用できます。

以上が固定高さのヘッダーとフッターを除いて、Div を本体の高さ 100% に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。