1

Web サイトのヘッダーを作成しています。通常の全幅のブラウザーで Web サイトを表示すると、ヘッダーは想定どおりに表示されます。ただし、画面サイズを幅の半分に縮小するとすぐに、これがポップアップします: http://i.imgur.com/w1P14QI.png (表示される黒いバー)。インスペクト要素を使用して、ドロップシャドウがどこから来ているのかを追跡しようとしましたが、どこに問題があるのか​​ わかりません。

CSS コード:

div#header {
        background:#41038e;
        min-width: 100%;
        height: 175px;
        margin: 0;
        padding: 0;
        z-index: 1;
        box-shadow: 0px 5px 5px -5px #666;
}
div#white-background {
        min-width: 100%;
        height: 125px;
        background:#FFF;
        padding: 0;
        z-index: -1;
}
div#header-inner {      
        width: 1200px;
        height: 200px;
        margin: 0 auto;
        padding: 0;
        z-index: 1;
 }
 div#logo {
        height: 100px;
        padding-top: 25px;
        margin: 0 auto;
        width: 1200px;
  }

HTML:

       <div id="white-background">
                <div id = "logo"><!--begin logo-->
                    <h2>The Cupertino Florist</h2>
                    <!--<img src="img/logo.png" />-->
                </div><!--end logo-->
             </div>
4

1 に答える 1

1

これを使って。

div#header {
    background:#41038e;
    min-width: 100%;
    height: 175px;
    margin: 0;
    padding: 0;
    box-shadow: 0 5px 5px -2px #666;
}
于 2013-06-13T05:59:04.737 に答える