CSS，位置：绝对的，滚动条

说有一个页面：CSS，位置：绝对的，滚动条

<html><body> 
<div style="position: relative;"> 
    <div style="position: absolute; left: -30px;">LEFT</div> 
    <div style="position: absolute; right: -30px;">RIGHT</div> 
<div> 
</body></html>

为什么水平滚动条仅占RIGHT溢出？

换句话说，为什么LEFT触发没有滚动条，而右呢？

有没有一种方法，比body -> overflow: hidden等，为RIGHT不触发滚动条？

编辑：

我尽量做到在页面中间的包装（像任何其他“内容”窗格中有 - 基本上div -> margins: 0 auto;这应该触发水平滚动条，如果屏幕太小。然后，这是问题，我想另一个div的对包装的“大棒外” - 这些不应触发滚动条

编辑2：

<html><body> 
<div id="wrapper" style="position: relative; margin: auto; 
    width: 400px; height: 200px; background-color: red;"> 
    <div style="position: absolute; left: -30px;">LEFT</div> 
    <div style="position: absolute; right: -30px;">RIGHT</div> 
<div> 
</body></html>

。

当屏幕足够宽，一切都很好。但是当我试图缩小屏幕时，突然出现一个水平滚动条。问题是，它只允许滚动查看右侧，而不是左侧。是否只有包装器才会出现，直到包装器大于屏幕才显示出来？

来源

2011-03-20 Lars Kanto

我不太让你的意思。你能提供一个截图或其他东西吗？ – 2011-03-20 21:46:52

我根据您的附加信息更新了我的答案。 – thirtydot 2011-03-20 21:54:49

你澄清后，我理解这个问题。

您可以通过添加一个包装元素，并给予该overflow: hidden和min-width绕过它。

Live Demo

HTML：

<div id="outerContainer"> 
    <div id="container"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     text 
    </div> 
</div>

CSS：

html, body { 
    margin: 0; padding: 0; border: 0 
} 

#outerContainer { 
    overflow: hidden; 
    min-width: 300px 
} 
#container { 
    margin: 0 auto; 
    width: 300px; 
    background: #ccc; 
    position: relative 
} 

#left, #right { 
    position: absolute; 
    background: #666; 
    width: 60px 
} 
#left { 
    left: -60px 
} 
#right { 
    right: -60px 
}

来源

2011-03-20 21:27:25 thirtydot

只是更增添了几分的信息，为什么我觉得我不能做你的方式。 – 2011-03-20 21:38:28

我有同样的问题，并最终使用媒体查询解决它。就我而言，我想有定位部分离屏可拖动/可调整大小的侧边栏（如果围绕1000像素窗口宽度），没有水平滚动条。

但如果窗口宽度小于960像素（主容器宽度是960）时，水平滚动条应当存在，使得用户可以看到这一切。

的标记：

<div class="container"> 
    <div class="main"> 
     <p>Main content</p> 
    </div> 
    <div class="sidebar"> 
     <p> 
      Sidebar content 
     </p> 
    </div> 
</div>

的CSS

.container {width:960px;margin:0 auto;position:relative;} 
.main {padding-right:100px} 
.sidebar {width:400px;position:absolute;top:0;right:-100px} 

// The fix: 
@media only screen and (min-width: 960px) { 
html {overflow-x:hidden} // no scroll if window width is > 960px 
}

来源

2011-12-22 11:11:10

CSS，位置：绝对的，滚动条

回答

相关问题