Question

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

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

示例： documentation尝试调整预览区域的框架以查看我的意思。

问题：如果屏幕高度太小，任何人都知道如何让菜单显示自己的滚动条。此菜单再次具有固定位置，距离所有边都是0像素。

Answer 1

这将使菜单最大化在视口高度。

添加

max-height: 100vh;

到ul css部分

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

（Demo）

Answer 2

您需要在ul：

中将min-height更改为max-height

变更前：

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **min-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

变更后：

ul {
    background: #191919;
    bottom: 0;
    color: #EDEDED;
    left: 0;
    margin: 0;
    **max-height: 150px;**
    padding: 0;
    position: fixed;
    overflow: auto;
    right: 0;
    top: 0;
}

JSFIDDLE DEMO

Answer 3

事实证明，通过添加媒体查询，并指定菜单的高度为100％工作！

@media screen and (max-height: 380px) {
    ul.nav {
        min-height: 100%;
        overflow: auto;
    }
}

CSS固定定位和滚动条

3 个答案: