CSS，position：absolute，scrollbars [英] CSS, position: absolute, scrollbars
问题描述
说有一个网页：
<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溢出？
Why the horizontal scrollbar only accounts for the RIGHT overflow?
换句话说，为什么LEFT不触发滚动条，而RIGHT呢？
In other words, why LEFT triggers no scrollbar, while RIGHT does?
有一种方法，除了 body - ;
Is there a way, other than body -> overflow: hidden, for RIGHT not to trigger the scrollbar?
编辑：
我试图实现的是一个在页面中间的包装器（像任何其他内容窗格 - 基本上 div - >边距：0 auto; code>。这将触发水平滚动条，如果屏幕太小，然后，这是问题，我想另一个div的外面的包装器 - 这些不应该触发滚动条。
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.
编辑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>
当屏幕足够宽，一切都很好，但是当我试图缩小屏幕时，突然出现一个水平滚动条。问题是，它只允许滚动查看RIGHT，而不是LEFT。是否为滚动条不会出现，直到包装器，只有包装器，大于屏幕？
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?
推荐答案
您可以通过添加一个wrapper元素来解决这个问题，并给出 overflow：hidden
You can get around it by adding a wrapper element, and giving that overflow: hidden, and a min-width.
strong> HTML ：
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
}
不能添加 overflow：hidden 和外部div的显式高度？
Why can't you add overflow: hidden and an explicit height to the outer div?
像这样： http://jsfiddle.net/thirtydot/YL5sD/
<div id="outer">
<div style="position: absolute; left: -30px;">LEFT</div>
<div style="position: absolute; right: -30px;">RIGHT</div>
<div>
使用CSS：
#outer {
position: relative;
overflow: hidden;
height: 100px;
background: #ccc
}
您可能需要添加更多背景信息给你的问题，得到一个更好的答案。
You probably need to add more background information to your question to get a better answer.
这篇关于CSS，position：absolute，scrollbars的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
