css - 滚动不适用于计算的高度

Question

.menu {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y:auto;
}

此 CSS 工作正常，但如果我将高度更改为计算高度，

height: calc(100% - 100px);

溢出隐藏，不滚动或自动。

有更好的主意吗？

Answer 1

在菜单周围添加一个 .menucontainer 并使用以下内容

.menucontainer {
    width: 100%;
    height: calc(100% - 100px);
    position: fixed;
}
.menu {
    width: 100%;
    height: 100%;
    position: static;
    overflow-y:auto;
}