绝对定位(侧边黄色广告)div在窗口调整大小(大小减小)超过它时会导致不需要的水平滚动条。只有当窗口小于主容器时才会显示滚动条,并且这些广告div不应影响布局。他们是否被保险没关系
HTML:
<;div id='topbar'>;
<;div id='menu'>&书信电报;a href=''>;Link1</a>;
<;a href=''>;Link2</a>;
<;a href=''>;链接3</a>;
<;a href=''>;Link4</a>;
</部门>;
</部门>;
<;div id='container'>;
<;div id='pushfix'></部门>;
<;div id='ad_container'>;
<;div id='ad1'>;ad</部门>;
<;div id='ad2'>;ad</部门>;
</部门>;
Lorem ipsum占位符文本
</部门>;
CSS:
正文,html{
身高:100%;
}
身体{
保证金:0;
}
#顶栏{
宽度:100%;
背景色:#DCDC;
高度:40px;
位置:绝对位置;
}
#菜单{
宽度:250px;
背景色:#B3;
保证金:0自动;
身高:100%;
文本对齐:居中;
线高:40px;
}
#菜单a{
颜色:#fff;
}
#容器{
身高:100%;
背景色:#808080;
宽度:240px;
填充:0 5px;
保证金:0自动;
}
#推进器{
高度:40px;
}
#ad_集装箱{
位置:相对位置;
宽度:240px;
}
#货柜组{
宽度:100px;
背景颜色:黄色;
高度:300px;
位置:绝对位置;
}
#ad1{
左:-105px;
}
#ad2{
右:-105px;
}
精确布局副本:http://jsfiddle.net/8UkQA/
出于某种原因,超出主体边界的绝对定位元素似乎会导致滚动条出现。您可以通过简单地将body标记内的所有内容包装在一个相对定位的div中来解决这个问题,该div的样式为overflow:hidden。超出此容器边界的绝对定位内容不会导致窗口上出现滚动条
下面是一个工作示例:http://jsfiddle.net/8UkQA/1/