绝对定位（侧面黄色的广告）的div会导致在调整窗口大小（减小尺寸）使其超出其范围时导致不必要的水平滚动条。仅当窗口小于main时滚动条才应出现，#container并且这些广告div不应影响布局。他们是否被覆盖并不重要。
HTML：
<div id='topbar'>
<div id='menu'> <a href='#'>Link1</a>
<a href='#'>Link2</a>
<a href='#'>Link3</a>
<a href='#'>Link4</a>
</div>
</div>
<div id='container'>
<div id='pushfix'></div>
<div id='ad_container'>
<div id='ad1'>ad</div>
<div id='ad2'>ad</div>
</div>
Lorem ipsum placeholder text
</div>
CSS：
body, html {
height:100%;
}
body {
margin:0;
}
#topbar {
width:100%;
background-color:#DCDCDC;
height:40px;
position:absolute;
}
#menu {
width:250px;
background-color:#B3B3B3;
margin:0 auto;
height:100%;
text-align:center;
line-height:40px;
}
#menu a {
color:#fff;
}
#container {
height:100%;
background-color:#808080;
width:240px;
padding:0 5px;
margin:0 auto;
}
#pushfix {
height:40px;
}
#ad_container {
position:relative;
width:240px;
}
#ad_container div {
width:100px;
background-color:yellow;
height:300px;
position:absolute;
}
#ad1 {
left:-105px;
}
#ad2 {
right:-105px;
}
确切的布局副本：http : //jsfiddle.net/8UkQA/
body出于某种原因，绝对定位的元素会扩展到外观的边界之外，从而导致出现滚动条。您可以通过将所有内容简单地包装在body标签内的样式为的div中来解决此问题overflow: hidden;。超出此容器边界的绝对定位内容不会在窗口上引起滚动条。
这是一个工作示例：http : //jsfiddle.net/8UkQA/1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句