Html CSS固定位置div内容在移动横向模式下被切断，不会滚动

我有一个div，它有一个位置：fixed和一堆列表项。在横向模式下在移动设备上查看时，菜单会切断列表项，不允许滚动。加载此JSFIDLE并将浏览器高度更改为600px左右将说明问题：

请注意#主菜单上的样式：

#main-menu {
...
position:fixed;
bottom:0px;
top: 0px;
}

这有帮助吗

@media (max-width: 480px) {
    #main-menu {
        left: 0px;
    }
}

---

您有

左：-200px

，您覆盖了其他屏幕尺寸，但不是最小的屏幕尺寸。

我在下面更新了相同的屏幕尺寸。你可以看看

变化：

.navbar{height:0; min-height:0;}
#main-menu {
    left: 0;
    overflow-y: scroll;
    width: 150px;
}

---

希望这有帮助。

这就是关于

位置的要点：固定。无论发生什么，内容都保持在固定位置

例如，您可以尝试使用
最大高度
进行媒体查询

@media (max-height: 600px) {
    #main-menu {
        position: absolute;
        overflow: visible;
    }
}

当高度降至给定阈值以下时，这允许主菜单与内容容器一起滚动

要查看阴影，可以添加适当的高度

height: 565px;

以这样的代码结束：

@media only screen and (max-width: 1099px) and (max-height: 700px) {
#header .menu-topcategorymenu-container {
overflow-y: scroll;
   max-height:300px;
   -webkit-overflow-scrolling: touch; /* works without it too */
}

}

1099px-手机菜单在1100700px-手机菜单下拉菜单占据的屏幕高度消失，iphone4上菜单占据的屏幕高度为300px
感谢您的快速响应！差不多了。它允许在导航区域中滚动，与在内容区域中滚动分开。是否可以使左右列滚动为一列？在#主菜单中将位置从固定更改为绝对-@novonI刚刚尝试将固定更改为绝对。如果内容区域的高度大于#主菜单，则阴影将停在与#主菜单相同的位置（换句话说，阴影不会到达页面底部）。添加高度：564px；边界半径：主菜单中的5px-@novonVery nice这起作用了。实际上，我最终将高度应用于#main menu.wrapper{}，并将阴影从#main menu移到#main menu.wrapper{}。出于某种原因，主菜单的高度受到限制，而包装纸却没有。再次感谢！我这样做是为了在移动设备上查看站点时自动隐藏菜单。一旦菜单实际打开（在纵向模式下）或屏幕处于横向模式（在横向模式下，菜单自动显示为左：0px）时，就会出现此问题。哦，我明白了。您是否尝试过使用
position:absolute
而不是
position:fixed
？在这种结构中，移动设备总是会出现问题，而且固定位置在移动设备中也不起作用。下拉阴影现在只沿#主菜单的高度运行。是否可以使其沿页面的整个高度运行？