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

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

总结

以上是内存溢出为你收集整理的html – 位置：绝对导致水平滚动条全部内容，希望文章能够帮你解决html – 位置：绝对导致水平滚动条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。