CSS overflow-x hidden and overflow-y visible

问题:

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?

回答1:

You can do this with CSS like this:

HTML:

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

回答2:

See what are you trying to achieve is not possible in css and overflow won't let you achieve this. Instead you can use jquery to get the output as you depicted in the posted picture/image.

I am not sure if you need something like this:

$('.horiz').width($('.container').width()); 

where .horiz is the horizontal bar and set the width of it to the width of the .container which holds the elements.

HTML Markup

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:

$(function(){    $('.horiz').width($('.container').width()); }); 

and output of it:

Check the Output

文章来源: CSS overflow-x hidden and overflow-y visible