CSS overflow-x隐藏和溢出可见 [英] CSS overflow-x hidden and overflow-y visible

问题描述

我已阅读SO SO：是一个工作的jsFiddle

I have read this SO Post: css overflow-x visible and overflow-y hidden causes scroll bar.

Also I have gone through: 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?

解决方案

You can do this with CSS like this:

HTML:

<div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS:

.wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

Now your .wrapper div will have overflow: visible; but your .inner div 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.

Here is a working jsFiddle

这篇关于CSS overflow-x隐藏和溢出可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！