如何设置absolute定位div动态高度且最大高度为100vh？

核心问题梳理 #

• 选择器不匹配：CSS中定义的是类选择器.absolute-container、.buttons-container，但HTML中对应元素用的是id属性，导致样式无法正确挂载
• 缺少高度约束绑定：仅给父容器设置max-height时，子滚动容器没有绑定父容器的可用高度限制，无法触发滚动，导致父容器会被内容直接撑开
• 视口高度计算遗漏：父容器设置了margin-top:12px，如果直接设max-height:100vh，容器总高度会超出视口范围

最终修改代码 #

CSS部分 #

/* 若HTML保留id写法，可将选择器改为#absolute-container、#buttons-container即可 */
.absolute-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 121;
    background-color: #FFF;
    width: 90vw;
    border: 1px solid #BECAD6;
    margin-top: 12px;
    /* 减去margin-top的高度，避免整体超出视口 */
    max-height: calc(100vh - 12px);
}

.buttons-container {
    /* 内容超出时才显示滚动条，替换scroll避免内容少的时候也显示滚动条占位 */
    overflow-y: auto;
    padding: 4px 8px;
}

HTML部分 #

<div class="absolute-container">
   <div class="buttons-container">
       <button>按钮1</button>
       <button>按钮2</button>
       <button>按钮3</button>
       <button>按钮4</button>
       <!-- 新增更多按钮也会自动适配 -->
   </div>
</div>

实现效果说明 #

• 内容高度小于100vh - 12px时，容器高度完全由内容自适应，不会出现多余空白
• 内容高度超过限制值时，容器高度固定为最大高度，按钮区域自动出现纵向滚动条，不会溢出视口

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