网站右侧的不需要的保证金

Question

我正在尝试使我的网站跨浏览器和分辨率兼容，但出于某种原因，当窗口调整大小时，我的网站右侧会出现奇怪的空白区域？如果它在我的原生1600x900 res中是全屏的，那就没关系了，我已经在横幅，导航选项卡和顶部的蓝色条等元素上设置了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>

Answer 1

如果div的背景没有固定的最小宽度，这是一个常见问题。百分比没有帮助。背景将不会显示在scrollarea中。你需要给它min-width: ..px

使其最小宽度：1050px，因为您的标头使用的是1050px。