设置溢出 -x: 隐藏添加一个垂直滚动条

小开

读你的问题... 我没看到任何问题..。

当我指定 overflow-x: hide 时，它会在元素上添加一个垂直滚动条。

如果它在它的高度上溢出(就像你刚才说的那样) ，那是很正常的。

我尝试过添加 overflow-y: visible; 甚至只添加 overflow: visible，但没有效果。

嗯... 这很正常，因为你告诉它显示一个垂直滚动条，这里已经有了。

正如 kuloir 所说: X = 水平; Y = 垂直。

小开

也许你误会了什么，我不明白的问题... 或问题不是在溢出设置。

Overflow: auto仅在需要时才添加滚动条(内容大于容器)。 Òverflow: visible将添加滚动条。 Òverflow: hidden不会添加滚动条。

我知道你想隐藏 x-content，也就是 overflow-x: hidden，但是从你的问题来看，我似乎不想让垂直滚动条看到垂直溢出的内容。

也许问题在于为容器设置了一个固定的高度(或 max-height) ，而且内容更大。删除高度(或最大高度) ，您将避免垂直滚动条。

... 或者就像我说的，只是不明白想要的效果是什么。

小开

试试这个:

height: auto;
width: 100px;
overflow: hidden;

应该将元素保持在100px 的宽度，并允许它根据内容垂直展开(不使用滚动条)。

小开

首先，这把小提琴显示了您所描述的问题。

到目前为止，我还不知道如何避开这个问题，但是看起来这里的规格提示:

“ overflow-x”和“ overflow-y”的计算值与除了一些具有“可见”的组合外，它们的指定值为 < strong > 不可能 : 如果一个指定为“可见”，而另一个指定为 ’滚动’或’自动’，然后’可见’被设置为’自动’。

小开

试着设置你的身高。要么让它像100% ，或自动看看这个

Jsfiddle

    height: auto;

小开

尝试设置显示属性? 溢出声明在块级元素上工作！

小开

只需使用 overflow: 隐藏在带有大小约束的包装器 div 上。请原谅我今天的排版有点匆忙。

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>


<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

在这里可以看到它的实际运作: http://jsfiddle.net/4PZC9/

小开

试试这个,

height: auto;
overflow:hidden;

干杯。

小开

看看这个相关问题的答案: https://stackoverflow.com/a/6433475/3583023

这解释了为什么

el {
overflow-x: hidden;
overflow-y: visible;
}

呈现为

el {
overflow-x: hidden;
overflow-y: auto;
}

它通常呈现与

el {
overflow-x: hidden;
overflow-y: scroll;
}

因为在大多数浏览器中，overflow-y的 auto值是 scroll。

因此，为了达到这个效果，我们不能使用 overflow-x/overflow-y属性。我已经试验了 clip属性作为一个潜在的替代品，但到目前为止没有运气: http://jsfiddle.net/qvEq5/

小开

就在一个小时前，我也遇到了类似的问题，只不过当我将 overflow的值指定为 auto时出现了问题。我没有使用 overflow-x或 overflow-y，我只是需要它完全包含我的两个列表，漂浮在两端。

对我起作用的是我将 overflow的值改为 hidden。试试这个。我已经将 max-width设置为 100%，而不是指定高度，我只是使用 overflow: hidden。

希望能帮上忙。