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

Stack Overflow用户

提问于 2011-05-30 18:58:34

回答 10查看 51K关注 0票数 73

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

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

我试过的每一个浏览器都会出现这种情况。

这里有一个片段，它演示了这种效果。我之所以使用<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>

W3C规范说：

计算值“overflow”和“overflow”与它们的指定值相同，只是一些“可见”的组合是不可能的:如果一个指定为“可见”，而另一个指定为“滚动”或“自动”，则“可见”设置为“auto”。

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

html

css

Stack Overflow用户

发布于 2014-03-31 18:49:16

尝尝这个,

height: auto;
overflow:hidden;

干杯。

票数 -3

查看全部 10 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6179831

复制

相似问题

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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