Html CSS，位置：绝对，滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5371580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, position: absolute, scrollbars
提问by Lars Kanto
Say there is a page:
假设有一个页面：
<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>
Why the horizontal scrollbar only accounts for the RIGHT overflow?
为什么水平滚动条只占 RIGHT 溢出？
In other words, why LEFT triggers no scrollbar, while RIGHT does?
换句话说，为什么 LEFT 不触发滚动条，而 RIGHT 呢？
Is there a way, other than body -> overflow: hidden, for RIGHT not to trigger the scrollbar?
除了body -> overflow: hiddenRIGHT之外，有没有办法不触发滚动条？
Edit:
编辑：
What I try to achieve is a wrapper in the middle of page (like any other "content" pane out there - basically div -> margins: 0 auto;. This should trigger horizontal scrollbar if the screen is too small. Then, and this is the problem, I want another div's to "stick outside" of the wrapper - these should not trigger the scrollbar.
我试图实现的是页面中间的包装器（就像那里的任何其他“内容”窗格一样 - 基本上div -> margins: 0 auto;。如果屏幕太小，这应该触发水平滚动条。然后，这就是问题所在，我想要另一个 div “粘在包装器外面” - 这些不应该触发滚动条。
Edit 2:
编辑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>
When the screen is wide enough, everything's fine. But as I try to shrink the screen, all of sudden a horizontal scrollbar appears. The problem is, it only allows to scroll to see RIGHT, and not LEFT. Is the a way to for the scrollbar not to appear until the wrapper, and only the wrapper, is larger than the screen?
当屏幕足够宽时，一切都很好。但是当我尝试缩小屏幕时，突然出现了一个水平滚动条。问题是，它只允许滚动查看右侧，而不是左侧。是否有一种方法可以让滚动条在包装器（并且只有包装器）大于屏幕时才出现？
采纳答案by thirtydot
After your clarification, I understand the problem.
经过你的澄清，我明白了这个问题。
You can get around it by adding a wrapper element, and giving that overflow: hidden, and a min-width.
你可以通过添加一个包装元素来解决这个问题，并给出overflow: hidden, 和min-width.
HTML:
HTML：
<div id="outerContainer">
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
text
</div>
</div>
CSS:
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
}
回答by Shift-e
I had the same problem and ended up solving it using media queries. In my case, i wanted to have a draggable / resizable sidebar positioned partly offscreen (if window width around 1000px) with no horizontal scrollbar.
我遇到了同样的问题，最终使用媒体查询解决了它。就我而言，我想要一个可拖动/可调整大小的侧边栏，它部分位于屏幕外（如果窗口宽度约为 1000 像素），而没有水平滚动条。
But if the window width is less than 960 px (the main container width is 960), the horizontal scrollbar should be present so that the user can see it all.
但是如果窗口宽度小于 960 px（主容器宽度为 960），则应该存在水平滚动条，以便用户可以看到所有内容。
The markup:
标记：
<div class="container">
<div class="main">
<p>Main content</p>
</div>
<div class="sidebar">
<p>
Sidebar content
</p>
</div>
</div>
The CSS
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
}
