4

Webページを開発しているときに、ボックスシャドウ機能の使用に問題が見つかりました。

ヘッダー、ナビゲーション、コンテンツ、フッターを含むWebページのラッパー全体にボックスシャドウを追加したいと思います。

navとcontentは並んでいる要素です。

問題は、ボックスシャドウを#wrapperに追加すると、ここで再現したように、ヘッダーにのみ表示されることです。

テーブルセルの妥当性という表示要素を並べて使用することで修正できましたが、ページの残りの部分が台無しになったため、どうすれば修正できるかを尋ねています。

4

3 に答える 3

6

ここoverflow:hiddenに示すように、ラッパーに追加します。それはあなたのコンテナに浮かんだ要素を包むことを強制します。

[編集]マークアップを追加する必要はありません...

于 2012-07-24T19:58:29.777 に答える
5

あなたは左側に要素を浮かせているのでCSSを使用clear:both;してください、これをチェックしてください：私のフィドル

于 2012-07-24T19:58:27.717 に答える
0

ラッパーの代わりに、同じサイズと位置で別のセパレートを作成し、ボックスシャドウを付けることができます。高さを好きなように変更し、シャドウしたいコンテンツの高さを計算します。

<style>
div.shadow {
width: 400px;
height: 100%;   
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999; 
}
</style>
<body>
<div class="shadow></div>

<!-- everything else here-->
于 2012-07-24T20:01:04.440 に答える