ボックスシャドウと100％流体幅の問題

Question

私は過去1〜2日に構築したページを研磨していて、ボックスシャドウを使用した後に問題に遭遇しました - 誰かがこれを修正する簡単な方法。

セットアップ： div、width、max-width、box-shadowなどのプロパティがいくつかあります。

#mydiv { 
     width:100%; 
     max-width:1200px; 
     -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
} 

問題：div要素の幅に40ピクセル 「ボックスシャドウ」プロパティが追加されます - それぞれの側に20ピクセル。画面が小さくてコンテンツが100％幅属性に当たると、水平スクロールバーが表示されます。 CSSを掘り下げた後では、divが技術的にwidthのようなものだったからです：100％+ 40px;

私が試したもの：親のdivに隠れて、私は、コンテンツにアクセスできなくなるだろう分幅のセットを持っている： を私はオーバーフローを設定すると考えられてきました。私はまたボックスシャドーCSSのサイズ引数にパーセンテージを使用しようとしました - たとえば1％ - そしてdivの幅を98％に設定しました - しかし、ボックスシャドーCSSはそのパーセンテージを受け入れていないようですサイズ。私はまた、ブラウザの幅をテストし、それに応じてボックスシャドウ要素を表示または非表示にするためにjavascriptを使用することを検討しましたが、最適なソリューションのようには見えません。

これを処理するには、より簡単な方法が必要です。思考？

Answer 1

これはブラウザのバグです。

影がスクロールトリガまたはスクロール可能な領域のサイズを大きくしないでください。これについては不明でしたが、文言は以来、影がスクロールトリガーべきではないことを明確にするために追加されました

​​

しかし、これ以前の省略、影のためにスクロールトリガーをやったほとんどのブラウザの結果として。これは最近のすべてのブラウザで修正されました。

は、古いブラウザでは、あなたは、スクロールバーと一緒に暮らすあなたの#mydivにoverflow-x: hiddenを追加する必要があり、それが何かを破壊しない願って、または（例えば、古き良きPNG画像を使用して）、影を追加するための別の方法を見つけることができますどちらか。ボックスシャドウと流体幅サイト内のスクロールバーの問題の回避策があります

• Firefox & CSS3: using overflow: hidden and box-shadow
• CSS box shadow on container div causes scrollbars

Answer 2

：

また、次の二つの関連の質問を参照してください。

@media命令をCSSに追加すると、ブラウザーウィンドウが特定の幅にあるときを検出できます（現代のブラウザーでこれをサポートしており、IE9でもそうです）。

は例えば、940pxに設定し、最大幅と中心pagewrap divのために、あなたのスタイルシートにこれを追加してみてください：

@media画面と（最小幅：998px）{ のdiv＃のpagewrap { -moz-box-shadow：3px 8px 26px＃a1a09e; -webkit-box-shadow：3px 8px 26px＃a1a09e; ボックスシャドウ：3px 8px 26px＃a1a09e; }}

@media cssの最小幅998pxは、スクロールバーをトリガーする直前にドロップシャドウを消すことです。