html – 位置：绝对导致水平滚动条

发布时间：2020-12-14 22:25:29 所属栏目：资源来源：网络整理

导读：当窗口调整大小(大小减小)超过它们时，绝对定位(侧面黄色广告)div的原因是不需要的水平滚动条。滚动条应该仅在窗口小于主#container时出现，这些广告div不应影响布局。没关系，如果他们被覆盖。 HTML： div id='topbar' div id='menu' a href='#'Link1/a a h

当窗口调整大小(大小减小)超过它们时，绝对定位(侧面黄色广告)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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!