Question

我正在进行一些基本的网页布局。问题是如果屏幕比1050px（1050px是包装器的宽度）更接近，浏览器不会忽略从包装器溢出的元素并添加horzinotal滚动条。查看代码：

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 px更接近，则div被隐藏）。

Answer 1

如果你想快速解决方案会使滚动条消失 - 添加

body{overflow-x: hidden;}

但是，我认为你应该以不同的方式编写你的代码，没有位置：绝对。

Answer 2

以这种方式纠正wrappermain ti的css

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

Answer 3

最好的办法是使用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都是您制作最佳网站和应用程序的起点。

强制浏览器忽略包装器中的溢出元素

3 个答案: