CSS overflow-x hidden和overflow-y visible

我已阅读此SOpost： css overflow-x visible和overflow-y hidden导致滚动条。

我也经历过： http ： //www.brunildo.org/test/Overflowxy2.html

我想实现如下目标：

当我尝试使用以下代码时：

overflow-x: hidden; overflow-y: visible; 

它显示如下结果：

我不希望滚动条出现。

Jquery有什么解决方案吗？

Answer 1

您可以使用CSS执行此操作：

HTML：

CSS：

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

现在你的.wrapper div会overflow: visible; 但是你的.inner div永远不会溢出，因为它的最大宽度为包装div的100％。 请注意，您的包装器必须具有明确定义的宽度。

这是一个有效的jsFiddle

Answer 2

看看你想要实现的是什么是不可能的css和overflow不会让你实现这一点。 相反，您可以使用jquery获取您在已发布的图片/图像中描述的输出。

我不确定你是否需要这样的东西：

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

其中.horiz是水平条，并将其宽度设置为包含元素的.container的宽度。

HTML标记

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()); }); 

和输出：

检查输出