css: min-height は Firefox ブラウザ ソリューションと互換性がありません

ページを構成するときは、通常、ヘッダー、本文、フッターの 3 つのセクションに分割します。次のページのような:

このとき、フッター部分がページの中央に表示されないように、ボディ部分の最小の高さを設定する必要があります。例えば、以下のような書き方です。

.page-content-header {    　　
min-height: 5%;
}
.page-content-body {    　　
min-height: 100%;}
.page-content-footer {    　　
min-height: 5%;}

この書き方では、ボディ部分がページサイズいっぱいの高さになるので、当然フッター部分はページの下端にあり、ボディ部分の内容が表示されます。 100%を超えると、高さは自動的に開き、オーバーフローはありません。

しかし、ここで問題が発生します。Firefox ブラウザーはこの書き込み方法と互換性がありません。100% はまったく有効になりません。これを互換性を持たせるには、次の方法を使用します。 Firefox を参照するには、! important を使用します。ブラウザをハックして、最小の高さを 600px に設定し、擬似要素: after を使用してスタイルをクリアします。これにより、コンテンツが最小の高さを超えると、それに応じて高さが増加します。

表示ボックスタイプの表示をブロックレベルの要素ブロックに設定し、左側と右側の両方でフローティング要素を許可するためにクリアを設定し、挿入した生成されたコンテンツは空であり、高さを0に設定します。要素を非表示に設定します。

これにより、Firefox はアダプティブを超える最小の高さとコンテンツを達成できるようになります。

以上がcss: min-height は Firefox ブラウザ ソリューションと互換性がありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。