0

我正在研究一些基本的网页布局。问题是如果屏幕小于 1050 像素（1050 像素是包装器的宽度），浏览器不会忽略从包装器溢出的元素并添加水平滚动条。查看代码：

HTML 

<body>
    <div id="wrapperMain">
        <div id="headerLeftOverflow"></div>            
        <div id="headerRightOverflow"></div>
        <div id="headerMain"></div>
    </div>
</body>

CSS

body {    
    margin: 0;
    padding: 0;
    background-color: #f9eacc;
    text-align: center;
    font-family: Tahoma , sans-serif;
    color: #333333;

}

div#wrapperMain {
   width:  1050px;
   margin: auto;
   position: relative;
   height: 800px;
}

div#headerMain {
    position: absolute;
    top: 0;
    left: 0;
    width: 1050px;
    height: 565px;
    background-image: url("../images/header.png");
    background-repeat: no-repeat;
}

div#headerLeftOverflow {
    position: absolute;
    width: 271px;
    height: 565px;
    background-image: url("../images/headerLeftOverflow.png");
    top: 0;
    left: -271px;    
}

div#headerRightOverflow {
    position: absolute;
    width: 277px;
    height: 565px;
    background-image: url("../images/headerRightOverflow.png");
    top: 0;
    left: 1050px;   
}

不要误会我的意思。

如果屏幕足够宽，我希望 id 为“headerRightOverflow”的 div 可见。奇怪的是 id 为“headerLeftOverflow”的 div 可以正常工作（如果屏幕小于 1050 像素，则 div 被隐藏）。

4

3 回答 3

1

如果您想快速解决使滚动条消失的问题 - 添加

body{overflow-x: hidden;}

但是，我认为你应该简单地编写你的代码，没有位置：绝对。

于 2012-06-08T11:53:33.650 回答
0

以这种方式正确的 wrappermain ti 的 css

div#wrapperMain { 
overflow:hidden;
   width:  1050px; 
   margin: auto; 
   position: relative; 
   height: 800px; 
}
于 2012-06-08T11:31:48.163 回答
0

最好的办法是使用 CSS3 媒体查询

/* Greater than standard 1050px */
@media only screen and (min-width: 1050px) {
//Your Code here that has to be performed when the screen size is more than 1050
}

或者你可以使用像modernizr这样的Javascript库

Modernizr 是您制作最佳网站和应用程序的起点，无论您的访问者使用什么浏览器或设备，它们都能正常工作。

于 2012-06-08T12:09:33.340 回答