私は複雑な CSS にかなり慣れていないので、質問があります。ページの下部にフローティング要素を配置するページがあります。Bottom: 0、Position: Absolute を設定することでこれを行います。
ユーザーがブラウザのサイズを非常に小さいサイズに変更すると、この要素がページ上の他のコンテンツを覆い隠します。
理想的には、要素は通常のサイズでも大きいサイズでもブラウザーの下部にフロートし続けますが、ブラウザー ウィンドウを縮小しすぎると、ブラウザーはフロート要素をそれ以上移動する代わりにスクロールバーを強制します。
基本的に、ブラウザに伝えたいのは、ウィンドウがどんなに小さくても、ページを 800x600 より小さくレンダリングしないことです。
あなたが設定することができますhtml, body { min-width: 800px; min-height: 600px; }
ただし、さまざまなブラウザでのYMMV。
ちょっとしたごまかしですが、浮動要素に必要な最小幅の画像を配置し、それと同じ色にするという古いトリックを使用できます。その後、実質的に非表示になりますが、要素、つまりページ全体が縮小するのを防ぎます。
これは、フローティング フッターを常に表示する必要があるかどうか、またはブラウザー ウィンドウが小さいときに下にスクロールできるかどうかによって異なります。
一部の JavaScript は、css ソリューションよりも管理しやすいと思います。min-width と min-height は、すべてのブラウザーで機能するとは限らないことに注意してください。
jquery を使用すると、これを簡単に行うことができます。$(window).resize( callback ) を使用して、ウィンドウのサイズ変更を処理するコールバック関数を設定できます。
サイズ変更コードの一部としてウィンドウの寸法も使用します。var wh = Math.max(600,$(window).height()); var ww = Math.max(800,$(window).width());
次に、ウィンドウ サイズに基づいてページの div のサイズを設定できます。$('div#mydiv').css('width',ww); 値を auto に設定して、指定した値を設定解除することもできます。