javascript - CSS水平滚动？

Question

我试图让我的页面不必水平滚动。

当我将导航栏和标题 div 添加到我的页面时，一切正常。但是，当我添加我的内容 div 时，它会强制我的页面左右滚动。它不比我的标题宽，为什么会这样？

这是我的代码:

body {
    min-width: 1024px;
    min-height: 700px;
    max-width: 1920px;
    max-height: 1080px;

    width: 100%;
    height: 100%;

    margin: 0 auto;

    background: url(/style/images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    <!-- FOR IE -->
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

.overlay {
    width: 100%;
    height: 100%;

    -webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
     -moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
     box-shadow: inset 0 0 5px rgba(68,105,244,.45);


}

.divstyle {
    background-color: rgba(247,247,247,.9);

    -webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
}

#navbar {
    height: 50px;
    min-width: 1600px;
    width: 100%;
    margin-bottom: 50px;

}

#header {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    border-radius: 5px;
}

#content {
    width: 1000px;
    min-height: 500px;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 5px; 
}

这是我的 html:

<div id="navbar" class="divstyle">
    <div class="overlay">
    </div>      
</div>

<div id="header" class="divstyle">
    <div class="overlay">
    </div>      
</div>

<div id="content" class="divstyle">
    <div class="overlay">
    </div>      
</div>

http://jsfiddle.net/9mRHT/

Answer 1

这是因为 min-width: 1600px; 存在于

#navbar {
height: 50px;
/* min-width: 1600px; */
width: 100%;
margin-bottom: 50px;
}

这将删除水平滚动条