overflow-x:hidden 也隐藏y的内容

Question

我有一个包含一些文本和图像的容器，以及一个 导航 div 应该（在适当的时候）从右侧滑入。

为了实现这一点，我虽然将 div 推到屏幕右侧，并将 overflow-x: hidden 放在它的容器上以隐藏它，然后在需要时将其推回屏幕。

问题是，当我在容器上设置overflow-x: hidden时，它也剪掉了导航的垂直内容。
Here's a fiddle with a demo。

我试过的：

• 为 overflow-y
设置不同的值
• 将导航div放置在内容容器内部和外部的不同容器中

None 其中似乎有效。

我看过其他有类似问题的问题，但 none 解决了我的问题 - 他们提出了不适合我情况的替代解决方案。

谢谢！

Answer 1

这是来自 .img class 在 CSS 的 height: 200px;。您正在加载的图像实际上是 310 像素高，因此您会看到底部的三分之一（大约）被剪掉了。