logo标签列表

溢出 x 和 y？

overflowcss
5
我有一个div，使用overflow-x隐藏内容，并使用overflow-y显示（visible）内容。
不幸的是，它并没有像我想的那样工作。它添加了垂直滚动条 - 我认为这是因为overflow-x和overflow-y不能同时使用。

据我所知，如果一个overflow设置为hidden，则另一个会被设置为auto。
还有其他方法吗？所以我可以水平隐藏溢出并在垂直方向上显示（无需滚动）？

为了避免混淆，这里有一个演示更多细节的Fiddle：http://jsfiddle.net/kwnQk/

编辑
这是我遇到的实际问题：http://jsfiddle.net/kwnQk/1/
我有一个选择框，由div和jQuery创建，最终超过了div的高度，导致它添加滚动条。
很遗憾，溢出功能的工作方式是这样的，因为div的overflow-x必须被隐藏，导致div的overflow-y被设置为auto。

编辑2
请参见此新JSFiddle，以准确显示我需要溢出的原因：http://jsfiddle.net/kwnQk/3/
它还包括滑块，需要设置为特定宽度。它们不能占据整个页面的高度，所以我也必须限制它们的高度。

我更新了原始的fiddle（删除了高度），它可以工作。不幸的是，在适应我正在工作的网站时，它没有起作用。请查看我在问题中的编辑。 - Richard Hedges
它们确实可以一起工作……只是不能以某些组合方式运作，正如你所发现的那样。 - BoltClock
在您的特定情况下，由于 overflow-x 并没有起到太大作用（因为您的项目并不是那么宽），您可以完全避免使用它，并获得正确的视觉效果：http://jsfiddle.net/kwnQk/2/。 - techfoobar
你遇到了一个棘手的问题。我建议不要使用CSS，而是使用JavaScript来解决（这在大多数情况下都是错误的）。您需要将选择框选项的内容移出.slide，然后使用绝对定位和.offset()进行定位。虽然有些粗暴，但似乎是可行的解决方案之一。 另一种方法是将选择框选项的高度限制在一定范围内，并使其可滚动，以便幻灯片本身不会滚动。 - VKen
无法理解为什么这被标记为重复，考虑到这个问题是在它的“重复”之前提出的。 - Richard Hedges
显示剩余4条评论
4个回答
2

我认为你可以将溢出属性保留为可见，只需使用左右填充即可。 除非有图片，否则文本应该会自动换行。

对于图片，你应该考虑使用宽度为100%的子div。

外部 div 设置为屏幕宽度。内部 div 具有手动设置的宽度（例如 500px）。这意味着因为 overflow-x 被设置为隐藏，overflow-y 被重置为自动。 - Richard Hedges
请查看我在原问题中的编辑。 - Richard Hedges
1
是的，最简单的解决方案是使用一个overflow属性为visible的div。 然后再加一个宽度为100％，高度为auto的子div。 然后可能需要更多的div来处理红色和黑色部分。 - Naman Goel
1

很遗憾，这是一个不好的组合。根据文档http://www.w3.org/TR/css3-box/#overflow-x：

‘overflow-x’和‘overflow-y’的计算值与它们的指定值相同，但某些与‘visible’组合不可能：如果其中一个被指定为‘visible’，而另一个被指定为‘scroll’或‘auto’，那么‘visible’将被设置为‘auto’。

0
我想隐藏滚动条，并且只显示垂直溢出。即使它超出了区域。 - Richard Hedges
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接