Question

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

注意＃main-menu上的样式：

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

Answer 1

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

的变化：

.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 - 我的屏幕高度被移动菜单下拉占用，我的屏幕高度为300px iphone4上的菜单

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

4 个答案: