Html 设置 overflow-x: hidden 添加垂直滚动条
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6179831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting overflow-x: hidden adds a vertical scrollbar
提问by Will Kunkel
When I specify overflow-x: hidden
on 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: visible
and 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-x
should 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-x
or overflow-y
is 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 auto
value of overflow-y
is scroll
in most browsers.
因为auto
价值overflow-y
是scroll
在大多数浏览器。
So, in order to achieve this effect, we can't use the overflow-x/overflow-y
properties. I've experimented with the clip
property 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-x
or overflow-y
, I just needed it to fully contain my two lists that were floating on opposite ends.
就在一个小时前,我遇到了类似的问题,但问题发生在我将overflow
的值指定为auto
. 我没有使用overflow-x
or overflow-y
,我只需要它来完全包含我的两个浮动在两端的列表。
What worked for me was that I changed overflow
's value to hidden
. Try that. I had set the max-width
to 100%
and instead of specifying height, I just used overflow: hidden
.
对我有用的是我将overflow
值更改为hidden
. 试试那个。我已经将 设置max-width
为100%
,而不是指定高度,我只是使用了overflow: hidden
.
Hope that helps.
希望有帮助。
回答by Joe
回答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: auto
will add the scrollbar only if needed (content bigger than container).
òverflow: visible
will add the scrollbar.
òverflow: hidden
will 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 = 垂直。