类Zillow项目中设置overflow:scroll的div无法自适应视口高度问题求助

基础全局样式重置 #

首先统一盒模型规则，锁定页面全局高度避免默认边距撑开视口：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: hidden; /* 禁止全局滚动，保证页面总高度不超过视口 */
}

弹窗场景实现方案 #

HTML结构示例 #

<!-- 全屏弹窗遮罩层 -->
<div class="modal-overlay">
  <div class="modal-container">
    <!-- 固定头部 -->
    <div class="modal-header">房产信息详情</div>
    <!-- 需滚动的内容区块 -->
    <div class="modal-scroll-area">
      <!-- 长列表/长内容插入此处 -->
    </div>
    <!-- 固定底部操作栏 -->
    <div class="modal-footer">
      <button>提交预约</button>
    </div>
  </div>
</div>

对应CSS代码 #

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container {
  width: 100%;
  max-width: 850px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-scroll-area {
  flex: 1; /* 自动占满头部、底部之外的所有剩余高度 */
  overflow-y: auto; /* 仅内容超出时触发垂直滚动，无多余滚动条占位 */
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

普通页面场景实现方案 #

如果滚动区块是页面主内容区，将页面根布局设置为弹性盒即可：

/* 页面根容器 */
.page-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 顶部导航栏 */
.page-nav {
  height: 64px;
}
/* 主内容滚动区 */
.page-content {
  flex: 1;
  overflow-y: auto;
}
/* 底部栏 */
.page-footer {
  height: 48px;
}

注意事项 #

• 所有滚动区的父级容器不得设置overflow: visible，否则高度约束会失效
• 无需给滚动区设置固定高度，flex:1会自动根据视口尺寸动态计算可用高度，窗口调整时可自动适配
• 优先使用overflow-y: auto替代overflow: scroll，避免内容不足时出现空滚动条

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