如何设置absolute-container高度为浏览器剩余高度且最大不超600px

实现方案 #

你可以通过修改CSS完成需求，无需额外复杂逻辑：

第一步：调整容器样式

.absolute-container {
    display: block;
    position: absolute;
    z-index: 121;
    background-color: #FFF;
    width: 90vw;
    /* 新增样式 */
    display: flex;
    flex-direction: column;
    /* 下方200px替换为该容器顶部距离视口顶部的实际偏移值即可，兼容旧浏览器可将100dvh改为100vh */
    max-height: min(600px, calc(100dvh - 200px));
}

第二步：调整滚动区域样式

.overflow-scroll-container {
    overflow-y: scroll;
    padding: 4px 8px;
    /* 新增样式 */
    flex: 1;
    overflow-y: auto;
}

实现逻辑

• min(600px, calc(100dvh - 顶部偏移值))同时满足两个高度约束：容器最大高度不超过600px，同时不会超出浏览器视口底部，窗口大小变化时会自动重新计算适配
• 采用flex纵向布局，滚动区域通过flex:1自动占满容器除底部操作栏外的剩余高度
• 没有给容器设置固定高度，内容较少时容器高度由内容自动撑开，不会强制延伸到视口底部
• overflow-y: auto替代固定的scroll，内容未溢出时不会显示空白滚动条，内容超出时自动出现滚动条
  如果容器的顶部偏移是动态变化的，可以在容器显示时通过少量JS动态计算高度：

const dropContainer = document.querySelector('.absolute-container');
// 容器显示时执行以下逻辑
const topOffset = dropContainer.getBoundingClientRect().top;
dropContainer.style.maxHeight = `min(600px, calc(100dvh - ${topOffset}px))`;

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