位置：绝对导致水平滚动条 [英] Position:absolute causes horizontal scrollbar

问题描述

绝对定位（边黄色广告）div的原因是不必要的水平滚动条，当窗口调整大小（大小减少）超出它们。滚动条应该只在窗口小于 #container 时出现，这些广告div不应该影响布局。

 < 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占位符文本
< / 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; 
} 
  

精确布局副本： http://jsfiddle.net/8UkQA/

c>> c>> c> c> c>原因。您可以通过简单地将所有内容包含在body标签中的一个相对位置的样式为 overflow：hidden; 的div中。扩展超出此容器边界的绝对定位内容不会导致窗口上的滚动条。

这是一个工作示例：http://jsfiddle.net/8UkQA/1/

Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.

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: http://jsfiddle.net/8UkQA/

解决方案

Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.

Here's a working example: http://jsfiddle.net/8UkQA/1/

这篇关于位置：绝对导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！