Question

我的页面的基本布局是：

<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>

headWrap包含我的所有菜单项和搜索栏。 contentWrap保存每个页面的内容。两者的宽度均为100％。 headWrap使用重复的背景图像contentWrap使用比屏幕尺寸大得多的背景图像。

不知何故，当呈现页面时，水平滚动条是可见的。即使看起来所有内容都在页面上。如果我滚动到侧面，背景图像不会继续，并且屏幕的滚动部分为白色。如果我将窗口拉得足够宽，则背景图像会占据整个页面。

如何找出导致水平滚动条的原因，以及为什么在拉伸窗口时会显示背景，而不是在滚动时显示。

#headWrap{
    position:relative;
    width:auto; 
    height:100px; 
    margin:0px; 
    padding:0px;
    z-index:500; 
    background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
    position:absolute; 
    top:50px; left:0px;
    text-align:left; 
    z-index:10; 
    width:auto; 
    height:1005; 
    margin:0 0 0 0; 
    padding:0 0 0; 
    float:left; 
    background:url(images/contentBg.jpg) repeat-x;
}

Answer 1

使用以下CSS样式：width和overflow:hidden;

    html{
        margin: 3px 1px;
    }
    *+html{
        overflow:auto;
    }
    body{
        margin:0;
        width:100%;
        min-width:800px;
        position:relative;
    }

   #headWrap{
    position:relative;
    width:100%; 
    height:100px; 
    margin:0px; 
    padding:0px;
    z-index:500; 
    background:url(images/VenueMenu.jpg) repeat-x;
} 

#contentWrap{
    position:absolute; 
    top:50px; left:0px;
    text-align:left; 
    z-index:10; 
    width:100%; 
    margin:0; 
    padding:0; 
    float: left;
    background:url(images/contentBg.jpg) repeat-x;
}

Answer 2

除了100％的宽度之外，你可能还有一些默认的边距？我建议使用重置css，例如YUI 2: Reset CSS。

Answer 3

您正在设置overflow CSS property。

没有滚动页面部分的背景

3 个答案: