html - CSS 固定位置 div 内容在移动横屏模式下被截断，不会滚动

Question

我有一个带有 position:fixed 的 div 和一堆列表项。在移动设备上以横向模式查看时，菜单会切断列表项并且不允许滚动。加载这个 jsfiddle 并将浏览器的高度更改为 600 像素左右的标记将说明问题：

http://jsfiddle.net/w55h3/1/

注意#main-menu 上的样式：

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

Answer 1

我在下面的小提琴中更新了相同的内容。你可以看看

变化：

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

希望这可以帮助。

Answer 2

这会有帮助吗？

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

你有left: -200px你覆盖其他屏幕尺寸但不是最小的。

Answer 3

这就是关于position: fixed;. 无论如何，内容都保持在固定位置。

您可以尝试使用max-height例如媒体查询

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

当高度低于给定阈值时，这允许主菜单与内容容器一起滚动。

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

height: 565px;

JSFiddle

Answer 4

结束了这样的代码：

@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 - 移动菜单在 1100 处消失，700px - 移动菜单下拉菜单占用的屏幕高度，iphone4 上菜单的屏幕高度 300px