jQuery CSS 溢出-x 隐藏和溢出-y 可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15970937/
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-x hidden and overflow-y visible
提问by Prasad Jadhav
I have read this SO Post: css overflow-x visible and overflow-y hidden causes scroll bar.
我已经阅读了这篇 SO Post：css overflow-x visible 和 overflow-y hidden 导致滚动条。
Also I have gone through: http://www.brunildo.org/test/Overflowxy2.html
我也经历过：http: //www.brunildo.org/test/Overflowxy2.html
I want to achieve something as follows:
我想实现如下目标：
When I tried using following code:
当我尝试使用以下代码时：
overflow-x: hidden;
overflow-y: visible;
It shows something like following result:
I dont want the scroll bar to appear.
它显示如下结果：
我不希望出现滚动条。
Does Jquery has any solution for it?
Jquery 有什么解决方案吗？
采纳答案by Bill
You can do this with CSS like this:
你可以像这样使用 CSS 来做到这一点：
HTML:
HTML：
<div class="wrapper">
<div class="inner">
</div>
</div>
CSS:
CSS：
.wrapper{
width: 400px;
height: 300px;
}
.inner{
max-width: 100%;
overflow-x: hidden;
}
Now your .wrapperdiv will have overflow: visible;but your .innerdiv will never overflow because it has a maximum width of 100% of the wrapper div. Note that your wrapper must have an explicitly defined width.
现在您的.wrapperdiv 将有，overflow: visible;但您的.innerdiv 永远不会溢出，因为它的最大宽度为包装 div 的 100%。请注意，您的包装器必须具有明确定义的宽度。
Hereis a working jsFiddle
这是一个有效的 jsFiddle
回答by Jai
See what are you trying to achieve is not possible in css and overflowwon't let you achieve this. Instead you can use jquery to get the output as you depicted in the posted picture/image.
看看你想要实现的目标在 css 中是不可能的，并且overflow不会让你实现这个目标。相反，您可以使用 jquery 来获取您在发布的图片/图像中描述的输出。
I am not sure if you need something like this:
我不确定你是否需要这样的东西：
$('.horiz').width($('.container').width());
where .horizis the horizontal bar and set the width of it to the width of the .containerwhich holds the elements.
其中.horiz是水平条并将其宽度设置为.container容纳元素的宽度。
HTML Markup
HTML 标记
<div class='container'>
<div class='horiz'></div>
<div class='vert'></div>
</div>
CSS:
CSS：
.container {
width:320px;
height:320px;
border:solid 5px green;
}
.horiz{
width:500px;
height:30px;
background:red;
}
.vert{
width:30px;
height:500px;
background:yellow;
position:absolute;
left:0;
top:30px;
}
jQuery:
jQuery：
$(function(){
$('.horiz').width($('.container').width());
});
and output of it:
和它的输出：
