ページサイズが小さすぎる場合にのみオーバーフローを隠す

Question

divという名前のページがあり、このページのdivにはposition: absolute;とtop:-20px; right: -20pxというロゴがあります。1000px widthとposition: relative;と言います。ページ幅が1000pxより大きい場合は、画像を表示する必要がありますが、ページ幅が1000px以下の場合はオーバーフローを隠す必要があります（overflow: hidden;）。

ページ区画のオーバーフロー属性をoverflow: hidden;に設定すると、ロゴが切り捨てられ、visibleを選択すると、ページ幅が1000px以下のときに水平スクロールバーが表示されます。

この問題を解決する私の考えは、JavaScriptを使用してページ幅に応じてoverflow属性を設定することです。私はCSSソリューションを好むが、見つけられなかった。 ：/

CSSを使用してこれを解決する方法はありますか？

ありがとうございます！

Answer 1

ソリューションは本当に簡単です...

ただ、ページの周りにラッパーのdivを作ります。たとえば、ページdivの幅が1000ピクセルで、ラッパーdivのサイズがwidth: 100%であるとします。次に、ラッパーdivにoverflow: hiddenを設定するのが最も簡単な方法です。ページサイズが例えば1020pxに縮小されると、画像の一部が切り取られ、さらに1000pxに縮小されると、ページdivのために水平スクロールバーが表示されますデフォルトoverflow: visible）。

これは...（ほぼ）5年前のブラウザで動作します。

Answer 2

CSS Mediaクエリ（http://www.w3.org/TR/css3-mediaqueries/）を使用して、画面サイズに基づいてレイアウトを変更できます。すなわち：

@media screen and (max-width: 1000px) { 
#page { overflow: hidden; } 
} 

#page { overflow: visible; } 

Answer 3

これは、ブラウザレイアウトの問題ではJavaScriptではありません。@mediaクエリを使用してください。

このように、水平スクロールを表示する場所は1200ピクセル以下です。

@media画面と（最小幅：1200px）{ HTML {オーバーフロー-X：隠された;}

スタイルシートの端部に、またはあなたのヘッダ内のいくつかのタグでテストするスティック。