如何让z-index为1的div元素占满整个屏幕垂直高度

解决方案 #

你设置高度不生效的核心原因是侧边栏父容器未绑定视口定位规则，且max-height: auto属于无效赋值，无法突破高度限制，按以下调整即可：

1. 先给外层导航容器绑定固定定位，强制占满整个视口高度：

.navigationbar--open {
    /* 相对于浏览器视口固定定位，脱离正常文档流 */
    position: fixed;
    top: 0;
    left: 0;
    /* 强制占满全屏高度 */
    height: 100vh;
    /* 侧边栏宽度可按需调整 */
    width: 280px;
    z-index: 999;
    /* 必须设置不透明的背景色，否则即使高度占满也会透出下层内容 */
    background-color: #165DFF; /* 替换为你实际的侧边栏蓝色值 */
    /* 侧边栏内容过多时自动出现滚动条，不会溢出 */
    overflow-y: auto;
}

2. 调整侧边栏内容区样式，取消高度限制：

.navigationbar--open .navigationbar__body {
    /* 覆盖默认的max-height限制，auto为无效值，改为none */
    max-height: none;
    opacity: 1;
    /* 可选：如果要让内容区占满头部以外的剩余高度，替换60px为你的导航头部实际高度 */
    min-height: calc(100% - 60px);
}

注意事项 #

• 如果调整后仍有下层内容透出，先检查是否有其他样式覆盖了上述规则，可在浏览器开发者工具的元素样式面板查看最终生效的CSS属性
• 不要只给子元素navigationbar__body设置高度，父容器没有明确高度的前提下，子元素的百分比高度不会生效
• 若页面其他元素存在更高的z-index值，可适当调高侧边栏的z-index值，确保始终在最上层

内容的提问来源于stack exchange，提问作者Arsene Wenger