当窗口调整大小(大小减小)超过它们时,绝对定位(侧面黄色广告)div的原因是不需要的水平滚动条。滚动条应该仅在窗口小于主#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; }
Exact layout replica: 07000
解决方法
由于某种原因,绝对定位的元素超出了身体的界限,似乎会导致滚动条出现。您可以通过简单地将body标签内的所有内容放在一个相对定位的div中,用overflow:hidden ;.超出此容器边界的绝对定位的内容不会导致窗口上的滚动条。
这是一个工作示例:http://jsfiddle.net/8UkQA/1/