Html 溢出-x:隐藏也隐藏y内容

我有一个包含一些文本和图像的容器，还有一个导航div（当时间到来时）应该从右侧滑入

为了实现这一点，我想我应该将div推到屏幕右侧，并将其容器上的

overflow-x:hidden

隐藏起来，然后在需要时将其推回到屏幕中

问题是，当我在容器上设置

overflow-x:hidden

时，它还会剪掉导航的垂直内容。
.

我尝试过的：

• 为溢出y设置不同的值
• 将导航div放置在内容容器内外的不同容器中

这些似乎都不管用

我已经用类似的问题研究了其他问题，但没有一个能解决我的问题——它们提出了不适合我的情况的替代解决方案

---

谢谢

这是来自CSS中的

.img

类，其中的

高度为200px。你正在加载的图像实际上是310px高，因此你得到了底部的三分之一（大约）被剪掉。
这是来自CSS中的
.img
类，其中你有
高度：200px。您正在加载的图像实际上是310px高的，因此，底部的三分之一（大约）被剪掉。
容器需要保持在该高度。但是导航应该比它高。当您将
.nav
设置为
位置：绝对时，您会将其从文档流中移除（本质上说是“在页面上绘制所有内容，然后放置此元素”），这意味着它不能用于确定高度。浏览器唯一需要确定高度的是图像，它的高度是200像素，加上上面的文本，因此它会将元素剪辑到该大小。对，因此理论上，我可以将
.nav
设置在我想要的任何高度，而不管其容器的高度如何。然而，这并没有发生。是的，导航可以是任何高度，但无论其位置如何，它都是提供“窗口”的容器。
.nav
仍然是您想要的高度，但是因为它仍然是~200px高容器的子容器，所以它仍然会被剪裁。你要么把它移到容器外面，要么放大容器的高度来显示整个
.nav
。我刚想出来：出于某种原因，你需要将
html
和
主体设置为
overflow-x:hidden
，否则它将无法工作。谢谢你的帮助！您可能应该更新您的答案以帮助其他人。容器需要保持在该高度。但是导航应该比它高。当您将
.nav
设置为
位置：绝对时，您会将其从文档流中移除（本质上说是“在页面上绘制所有内容，然后放置此元素”），这意味着它不能用于确定高度。浏览器唯一需要确定高度的是图像，它的高度是200像素，加上上面的文本，因此它会将元素剪辑到该大小。对，因此理论上，我可以将
.nav
设置在我想要的任何高度，而不管其容器的高度如何。然而，这并没有发生。是的，导航可以是任何高度，但无论其位置如何，它都是提供“窗口”的容器。
.nav
仍然是您想要的高度，但是因为它仍然是~200px高容器的子容器，所以它仍然会被剪裁。你要么把它移到容器外面，要么放大容器的高度来显示整个
.nav
。我刚想出来：出于某种原因，你需要将
html
和
主体设置为
overflow-x:hidden
，否则它将无法工作。谢谢你的帮助！您可能应该更新您的答案以帮助其他人。