我有一个带有 position:fixed 的 div 和一堆列表项。在移动设备上以横向模式查看时,菜单会切断列表项并且不允许滚动。加载这个 jsfiddle 并将浏览器的高度更改为 600 像素左右的标记将说明问题:
注意#main-menu 上的样式:
#main-menu {
...
position:fixed;
bottom:0px;
top: 0px;
}
我有一个带有 position:fixed 的 div 和一堆列表项。在移动设备上以横向模式查看时,菜单会切断列表项并且不允许滚动。加载这个 jsfiddle 并将浏览器的高度更改为 600 像素左右的标记将说明问题:
注意#main-menu 上的样式:
#main-menu {
...
position:fixed;
bottom:0px;
top: 0px;
}
我在下面的小提琴中更新了相同的内容。你可以看看
变化:
.navbar{height:0; min-height:0;}
#main-menu {
left: 0;
overflow-y: scroll;
width: 150px;
}
希望这可以帮助。
这会有帮助吗?
@media (max-width: 480px) {
#main-menu {
left: 0px;
}
}
你有left: -200px
你覆盖其他屏幕尺寸但不是最小的。
这就是关于position: fixed;
. 无论如何,内容都保持在固定位置。
您可以尝试使用max-height
例如媒体查询
@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 - 移动菜单在 1100 处消失,700px - 移动菜单下拉菜单占用的屏幕高度,iphone4 上菜单的屏幕高度 300px