25

我已阅读此 SO 帖子：css 溢出-x 可见和溢出-y 隐藏导致滚动条。

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

我想实现以下目标：

溢出

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

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

它显示类似于以下结果：
溢出 2
我不希望出现滚动条。

Jquery 有什么解决方案吗？

4

3 回答 3

8

你可以用这样的 CSS 来做到这一点：

HTML：

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

CSS：

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

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

这是一个工作的jsFiddle

于 2013-04-12T12:27:19.810 回答
2

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

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

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

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

HTML 标记

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

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

及其输出：

检查输出

于 2013-04-12T12:20:50.947 回答
2

CSS：

.class-div {
   overflow-x: clip;
   overflow-y: visible;
}

剪辑的问题是，它限制了所有滚动，甚至是编程滚动。

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/overflow

于 2021-07-04T15:01:28.743 回答