Html CSS 溢出 - 未按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4153601/
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 Overflow - Not working as expected
提问by Sam
In my mind the above example should look like a grey box with #xnot going past the edge and #ypoking out the bottom.
在我看来，上面的例子应该看起来像一个灰色的盒子，#x没有越过边缘并#y戳出底部。
But it's not like that - apparently setting overflow-x: hidden;causes overflow-y: scroll | auto;.
但事实并非如此 - 显然是设置overflow-x: hidden;原因overflow-y: scroll | auto;。
Is there any way around this?
I need to allow certain elements to escape the bounding box without setting overflow: visibleon #box.
有没有办法解决？
我需要允许某些元素在不设置overflow: visibleon 的情况下转义边界框#box。
回答by batwad
#ycan't break out of its bounding box without being taken out of the flow of the document. Does adding position: absolute;to #ygive the effect you're after?
#y不能脱离其边界框而不脱离文档流。是否加入position: absolute;到#y给你后的效果？
Update
更新
Restructured HTML example, including a containing box to allow everything to be easily positioned together. Try it out here: http://jsfiddle.net/GfNbp
重新构建的 HTML 示例，包括一个包含框以允许将所有内容轻松放置在一起。在这里试试：http: //jsfiddle.net/GfNbp
<div id="container">
<div id="box">
<div id="x"></div>
</div>
<div id="y"></div>
</div>
#box {
width: 100px;
height: 100px;
margin: 10px;
background: #ededed;
padding: 10px;
/* ADD THE OVERFLOW */
overflow-x: hidden;
overflow-y: visible;
}
#container{
position: absolute;
top: 30px;
left: 20px;
}
#x {
width: 150px;
height: 10px;
background: #c1ffb2;
}
#y {
width: 10px;
height: 150px;
background: #c4b2ff;
position: absolute;
left: 20px; /* margin+padding */
top: 30px; /* margin+padding+x-height */
}
回答by Bryan A
Here's what I have, and it works:
这是我所拥有的，并且有效：
#box {
position:absolute;
width: 100px;
height: 100px;
margin: 10px;
background: #ededed;
padding: 10px;
/* ADD THE OVERFLOW */
overflow-y:visible;
overflow-x:hidden;
}
#x {
width: 150px;
height: 10px;
background: #c1ffb2;
}
#y {
width: 10px;
height: 150px;
background: #c4b2ff;
position: fixed;
}
回答by oliver-clare
I think the problem is your height: 100px in the outer div. If you remove this height attribute, do you get the result you're looking for?
我认为问题在于您的高度：外部 div 中的 100px。如果你去掉这个高度属性，你会得到你想要的结果吗？
Otherwise, I think batwad's probably knocked the nail on the head using three divs.
否则，我认为 batwad 可能使用三个 div 敲了敲头。
