-4

Web サイトをクロスブラウザーと解像度に対応させようとしていますが、ウィンドウのサイズを変更すると、何らかの理由で Web サイトの右側に奇妙な空白が表示されます。ネイティブの 1600x900 解像度で全画面表示であれば問題ありません。min-width: 100%バナー、ナビゲーション タブ、上部の青いバーなどの要素を設定しました。

ここに画像の説明を入力

CSS:

body { background-color:#F5F5F5; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; }
.header { padding:0px 10px 0px 10px; height:170px; margin:0 auto; width:1050px; margin-top:0px; }
.container { width: 1025px; margin: 0 auto; }

div.menubar { background: #ccc; width: 100%; min-width: 100%;}
div.banner-image { overflow: hidden; width: 100%; height: 100%; z-index: 1; }

画像バナーの HTML:

    <div class="menubar">
        <div class="container">
            <ul id="topnav">
                    <?php
                    Template::Show('core_navigation.tpl');
                    ?>
            </ul>
        </div>
    </div>

            <div class="banner-image">
                <div class="slicebox-wrapper">
                    <ul id="sb-slider" class="sb-slider">
                        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab1.jpg" alt="image1"/></li>
                        <li><img src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/slicebox/img/ab2.jpg" alt="image2"/></li>
                    </ul>   
                </div>
            </div>
4

1 に答える 1

2

これは、div の背景に最小幅が固定されていない場合によくある問題です。パーセンテージは役に立ちません。背景はスクロールエリアに表示されません。あなたはそれを与える必要がありますmin-width: ..px

ヘッダーが 1050px を使用しているため、min-width: 1050px にします。

于 2013-01-08T20:09:51.020 に答える