7

次の設定のWebサイトがあります。

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

十分なコンテンツがない場合は、クリアフッターとコンテナーの外側のフッターを使用して、ページの下部にフッターを保持します。

私の問題は、次の方法でコンテナdivにボックスシャドウを適用したいということです。

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
           position:relative; padding:0px; background-color:#e6e6e6; 
           -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
           3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer   {height:32px; padding:0px; position:relative; width:960px; 
           margin:0px auto 0px auto;}

ご覧のとおり、コンテナdivの両側にドロップシャドウがあります。ただし、これを行う際に、コンテンツが完全な高さを占めていない場合でも、ぼやけのために影がフッターの下部を通過することによって引き起こされるスクロールバーがあります。

シャドウがコンテナdivの端を超えてスクロールバーが発生するのを防ぐ方法はありますか？

ご協力いただきありがとうございます！

4

9 に答える 9

9

ここで指摘されているように、Webkit は最近動作を変更しました: http://archivist.incutio.com/viewlist/css-discuss/109662

実際、今日の時点でも、Gecko およびおそらく他のブラウザーの問題です。

他のすべてのブラウザでも機能する負のマージンを使用して、Gecko でこの厄介な問題を修正することができました。

ゼロ オフセットとぼかし半径 R でボックス シャドウが適用された画面全体の要素 (E) があると仮定します。影が要素 E に幅を追加して再レイアウトするため、水平スクロールバーの問題を扱っていると仮定します。

  1. ヘルパー ラッパー要素 (W) で E をラップします。
  2. オーバーフローを設定: W で非表示
  3. set padding: R 0 R 0 on W
  4. マージンを設定: -R 0 -R 0 on W

アイデアは、overflow hidden を使用して左右の問題のある影を切り取ることです。次に、パディング+負のマージンのトリックを使用して、上下の影をクリップせず、ボックスをHTMLフローの同じ場所に保ちます.

この手法を適用して、問題のあるシャドー ボックスの任意の側面を切り取ることができます。

于 2010-07-10T20:48:34.130 に答える
2

の親要素に#containerを追加overflow: visibleすると、問題が解決する場合があります。

下部のフッターに関する一般的なアドバイスとして、代わりにmin-heightonを設定することを忘れて、代わりにandを#container使用してフッターを設定し、フッターの後ろに隠れないようにすることをお勧めします。ウィンドウの下部にフッターを配置する場合は、代わりに使用してください。position: absolutebottom: 0#containermargin-bottomposition: fixed

それが役に立てば幸い。

于 2010-03-04T02:32:56.787 に答える
1

ラッピング要素が含まれていないため、少なくとも私にとってより良い解決策は、影のある要素にクリッピング四角形を配置することです。

上記の例 clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE)では、ドロップ シャドウを下部のみでクリップします。

于 2010-09-01T20:49:35.907 に答える
1

Imho、そして私のテストによると、あなたが言ったように、要素のcssシャドウがページの幅と高さの両方を増やしているようです（周囲の要素の幅または高さが100％に設定されている場合）。cssの回避策は見つかりませんでしたこの問題はまだです。

そこで質問なのですが、どうやってフッターをページの一番下に置いていますか? フッターの幅は？

絶対配置で試しました（ページの下部にフッターが必要なときに慣れているように）が、問題は幅と同じです。もちろん、幅を90％のようなパーセンテージに設定できますしかし、問題は残っています... これは、この単純な概念を説明するスニペットです。したがって、これは本当の答えではありません。これに対する解決策はまだ見つかっていません。

ペーストビン

これが役に立つことを願っています

于 2010-03-02T13:57:18.550 に答える
1

#container要素にpadding-bottom:8px (影の高さ + ぼかしサイズ) を追加してみてください。

于 2010-07-11T08:09:30.693 に答える
0

この問題の解決策は非常にあいまいであるか、現在のテクノロジーでは解決策がありません。それはウェブデザインの一般的なテーマであるため、これを達成する方法は本当に残念です。

それが唯一の正しい解決策であるように思われるので、私はpngシャドウを使用することに頼りました。

于 2010-05-13T02:05:49.590 に答える
0

コンテナー div を追加する必要があるため、これが最適な解決策かどうかはわかりませんが、要素をコンテナー div でラップし、オーバーフローを非表示に設定すると、機能するようです。ただし、影を表示したい場所にパディングを設定する必要があります。

これが最善の解決策ではないことはわかっていますが、うまく機能し、他の解決策を見つけられないようです。

于 2010-06-16T14:52:25.600 に答える
0

高さ 100% (つまり、画面上の全高) の div があり、ボックス シャドウがありました。
box-shadow: 0 0 10px rgba(0,0,0,0.4);

これにより、コンテンツが画面より長くないにもかかわらず、スクロール バーが表示されていました。

私がしたことは、負の垂直オフセットを設定する box-shadow: 0 -10px 10px rgba(0,0,0,0.4);ことだけでした。それで解決しました。

于 2011-05-05T16:29:06.477 に答える