Html 设置 overflow-x: hidden 添加垂直滚动条

Setting overflow-x: hidden adds a vertical scrollbar

提问by Will Kunkel

When I specify overflow-x: hiddenon an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visibleand even just overflow: visible, to no effect.

当我overflow-x: hidden在水平和垂直溢出的元素上指定时，除了隐藏水平溢出的内容外，该元素还会获得一个垂直滚动条。我曾尝试添加overflow-y: visible甚至只是overflow: visible，但没有效果。

Am I misunderstanding what these properties do? I would think that overflow-xshould not affect the vertical overflow at all.

我误解了这些属性的作用吗？我认为这overflow-x根本不会影响垂直溢出。

This has happened on every browser I've tried.

这发生在我尝试过的每个浏览器上。

Here's a snippet which demonstrates the effect. I'm using <pre>tags because they're an easy way to create overflowing content, but it seems to happen with any tag.

这是一个演示效果的片段。我使用<pre>标签是因为它们是创建溢出内容的一种简单方法，但似乎任何标签都会发生这种情况。

pre {
  height: 40px;
  width: 150px;
  margin-bottom: 50px; /* We need this so they don't overlap. */
}

#x-hidden {
  overflow-x: hidden;
}

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

#visible {
  overflow: visible;
  overflow-x: hidden;
}

<pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="x-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="y-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

The W3C specsays:

在W3C规范说：

The computed values of ‘overflow-x' and ‘overflow-y' are the same as their specified values, except that some combinations with ‘visible' are not possible: if one is specified as ‘visible' and the other is ‘scroll' or ‘auto', then ‘visible' is set to ‘auto'.

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是 'scroll'或 'auto'，则 'visible' 设置为 'auto'。

But this makes no mention of the case when overflow-xor overflow-yis set to hidden, which to me implies that this combination is indeed meant to be possible.

但这并没有提及何时overflow-x或overflow-y设置为 的情况hidden，这对我来说意味着这种组合确实是可能的。

回答by unruthless

Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023

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

It explains why

它解释了为什么

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

renders as

呈现为

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

which usually renders the same as

这通常与

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

because the autovalue of overflow-yis scrollin most browsers.

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

So, in order to achieve this effect, we can't use the overflow-x/overflow-yproperties. I've experimented with the clipproperty as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/

所以，为了达到这个效果，我们不能使用overflow-x/overflow-y属性。我已经尝试将该clip属性作为潜在的替代方案，但到目前为止还没有运气：http: //jsfiddle.net/qvEq5/

回答by relentless-coder

Just an hour ago I had the similar problem except the problem occurred when I had specified overflow's value as auto. I didn't use overflow-xor overflow-y, I just needed it to fully contain my two lists that were floating on opposite ends.

就在一个小时前，我遇到了类似的问题，但问题发生在我将overflow的值指定为auto. 我没有使用overflow-xor overflow-y，我只需要它来完全包含我的两个浮动在两端的列表。

What worked for me was that I changed overflow's value to hidden. Try that. I had set the max-widthto 100%and instead of specifying height, I just used overflow: hidden.

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

Hope that helps.

希望有帮助。

回答by Joe

Try setting your height. Either make it like 100%, or auto check this

尝试设置您的高度。要么让它像 100%，要么自动检查这个

jsfiddle

提琴手

    height: auto;

回答by James Dinsdale

Give this a try:

试试这个：

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

Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).

应该将元素保持在 100px 宽，并允许它根据其内容垂直扩展（没有滚动条）。

回答by Danield

Firstly, this fiddleshows the problem which you describe.

首先，这个小提琴显示了你描述的问题。

As yet, I don't know how to get around this, but it seems like the spec hints to this here:

到目前为止，我不知道如何解决这个问题，但这里的规范似乎暗示了这一点：

The computed values of ‘overflow-x' and ‘overflow-y' are the same as their specified values, except that some combinations with ‘visible' are not possible: if one is specified as ‘visible' and the other is ‘scroll' or ‘auto', then ‘visible' is set to ‘auto'.

' overflow-x' 和 ' overflow-y'的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是 'scroll' 或 'auto'，则“可见”设置为“自动”。

回答by tremor

Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.

只需使用溢出：隐藏在具有大小限制的包装器 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>

See it in action here: http://jsfiddle.net/4PZC9/

在这里查看它的实际效果：http: //jsfiddle.net/4PZC9/

回答by user3482296

Try this,

尝试这个，

height: auto;
overflow:hidden;

Cheers.

干杯。

回答by Kraken

Try setting the display property? The overflow declaration works on block level elements!

尝试设置显示属性？溢出声明适用于块级元素！

回答by miguel-svq

Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.

也许你误解了一些东西，我没有理解这个问题......或者问题不在溢出设置中。

Overflow: autowill add the scrollbar only if needed (content bigger than container). òverflow: visiblewill add the scrollbar. òverflow: hiddenwill NOT add the scrollbar.

Overflow: auto仅在需要时添加滚动条（内容大于容器）。 òverflow: visible将添加滚动条。 òverflow: hidden不会添加滚动条。

I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.

我知道您希望隐藏 x 内容，因此overflow-x: hidden，但从您的问题来看，我似乎不希望垂直滚动条看到垂直溢出的内容。

Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.

也许问题是为容器设置了固定高度（或最大高度）并且内容更大。删除高度（或最大高度），您将避免垂直滚动条。

...or as maybe I said, just didn't understood what is the desired effect.

……或者正如我所说，只是不明白想要的效果是什么。

回答by RobinJ

Reading you question... I don't see any problem...

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

Whe I specify overflow-x:hidden; on an element, it adds a vertical scroll bar.

当我指定溢出-x:hidden; 在一个元素上，它添加了一个垂直滚动条。

If it overflows in it's height (as you just said it does), then that's quite normal.

如果它的高度溢出（正如你刚才所说的那样），那么这是很正常的。

I have tried adding overflow-y:visible; and even just overflow:visible, to no effect.

我试过添加溢出-y：可见；甚至只是溢出：可见，没有任何效果。

Well... That's normal, as you're telling it to show a vertical scrollbar, wich there already is.

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

As kultheitroad said: X = horizontal; Y = vertical.

正如 kultheitroad 所说：X = 水平；Y = 垂直。