css - CSS スティッキー フッターの水平オーバーフローの問題

Question

http://www.cssstickyfooter.com/を見て、ブラウザ ウィンドウのサイズを 600px 未満に変更してください。

コンテンツが幅を超えてオーバーフローすると、ヘッダー要素とフッター要素が不足することに注意してください。

ページが水平にスクロールするときにヘッダーとフッターが不足しないように、これを防ぐ方法はありますか?

Answer 1

この問題は、ドキュメントの残りの部分と一緒に伸びていない要素に最小幅を割り当てることで解決できます。

サンプル サイトの DOM インスペクターで、以下を追加してみてください。

min-width: 960px;

...ヘッダーとフッターに。問題が解決しました！私はこれをかなりの回数使用しており、すべてのブラウザーとデバイスで良好な結果が得られています。

Answer 2

あなたが見ているのは、.main、.foot、および静的な幅を持つ他のレイアウト要素よりもウィンドウを狭くすることの副作用です。幅がない場合、または幅が狭い場合は、問題なく機能します。

Answer 3

幅が 600px 未満のブラウザを実際に使用している人は誰もいません。800x600 ピクセルでさえ、ほとんどの人にとって死につつあります。この調査結果を見てください: http://www.w3schools.com/browsers/browsers_display.asp

横方向のオーバーフローや、モバイル デバイスのページ幅が小さい場合のその他の問題についてのみ心配する必要があります。この場合、適切なモバイル ブラウザーと特定のスタイルシートが問題を解決します。