CSS固定位置和滾動條

Question

我的網站上有一個導航菜單，每當用戶通過媒體查詢在移動設備上使用該網站時，該菜單就會轉換為全屏滑出菜單。 但是，如果屏幕高度垂直太小而無法顯示菜單的內容（例如可穿戴設備），我希望菜單具有其自己的滾動條。

問題：菜單適合自己的屏幕，固定位置的所有側面均為0像素。 但是，即使為菜單分配了最小高度和overflow: visible|auto屬性，它也始終不會顯示其自己的滾動條。 只顯示身體。

示例： http : //jsfiddle.net/spryno724/fbhh15fo/嘗試調整預覽區域框架的大小以了解我的意思。

問題：如果屏幕高度太小，任何人都知道如何使菜單顯示其自己的滾動條。 同樣，此菜單有一個固定的位置，該位置從所有角度均為0像素。

Answer 1

這將使菜單在視口高度最大化。

加

max-height: 100vh;

到ul css部分

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

（ 演示 ）

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演示

Answer 3

事實證明，通過添加媒體查詢並將菜單的高度指定為100％可以正常工作！

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