html - CSS 固定定位和滚动条

Question

我的网站上有一个导航菜单，只要用户通过媒体查询在移动设备上使用该网站，该菜单就会转换为全屏滑出式菜单。但是，如果屏幕垂直高度太小而无法显示菜单的内容(例如可穿戴设备)，我希望菜单有自己的滚动条。

问题:菜单本身适合屏幕，固定位置距所有边均为 0 像素。然而，即使我有一个最小高度和一个 overflow: visible|auto 属性分配给菜单，它仍然不会显示自己的滚动条。只显示 body 。

示例: http://jsfiddle.net/spryno724/fbhh15fo/尝试调整预览区域的框架大小以了解我的意思。

问题:如果屏幕高度太小，谁知道如何让菜单显示自己的滚动条。同样，此菜单有一个固定位置，即所有边距均为 0 像素。

Answer 1

这将使菜单在视口(viewport)高度处最大化。

添加

max-height: 100vh;

到 ul css 部分

ul {
    /* Lots of declarations */
    max-height: 100vh;
}

( Demo )