位置:绝对原因水平滚动条

绝对定位(侧边黄色广告)div在窗口调整大小(大小减小)超过它时会导致不需要的水平滚动条。只有当窗口小于主容器时才会显示滚动条,并且这些广告div不应影响布局。他们是否被保险没关系

HTML:

<div id='topbar'>
<div id='menu'&gt&书信电报;a href=''>Link1&lt/a>
<a href=''>Link2&lt/a>
<a href=''>链接3&lt/a>
<a href=''>Link4&lt/a>
&lt/部门>
&lt/部门>
<div id='container'>
<div id='pushfix'&gt&lt/部门>
<div id='ad_container'>
<div id='ad1'>ad&lt/部门>
<div id='ad2'>ad&lt/部门>
&lt/部门>
Lorem ipsum占位符文本
&lt/部门>

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/

发表评论