固定页眉页脚间可滚动Overlay弹窗实现问题求助

问题说明 #

现有布局：固定高度页眉、动态高度页脚，中间为可滚动内容区。页脚内设有按钮，点击后展开的Overlay存在两个问题：内容无法滚动，且会超出页眉区域。需要让Overlay严格处于页眉与页脚之间，不重叠二者，同时自身内容可滚动。

限制条件 #

• 页眉高度固定，页脚高度随内容动态变化
• Overlay必须置于.footer类内部
• 仅允许使用HTML、CSS实现，禁止JS/TS处理动态页脚高度

解决方案 #

核心思路 #

利用CSS容器查询获取动态页脚的高度，结合CSS变量与视口单位计算Overlay的最大高度，通过固定定位将Overlay限制在页眉与页脚之间，同时开启自身垂直滚动。

修改后的代码 #

HTML（结构保持不变）

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Long middle content.....
  </div>
</div>
<div class="footer">
  Footer <a href="#" id="button">Click me</a>
  <div class="footer-wrapper">
    <div id="footer-content">Start of footer content
Long footer content....
    </div>
  </div>
</div>

CSS（关键修改部分）

/* 定义CSS变量存储固定页眉总高度（含margin、padding） */
:root {
  --header-total-height: 80px;
}

html, body {
  min-height: 100vh;
  margin: 0;
}

/* 用Grid布局划分页面区域，确保整体结构稳定 */
body {
  display: grid;
  grid-template-rows: var(--header-total-height) 1fr auto;
}

.wrapper {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 10px;
  background: silver;
  margin-top: 20px;
  height: 40px; /* 固定内容高度，加上margin和padding总高80px */
  box-sizing: border-box;
}

.content {
  overflow-y: auto;
  min-height: 2.5rem;
  padding: 2.5rem;
  flex-grow: 1;
  background: pink;
}

/* 为页脚启用容器查询，用于获取其动态高度 */
.footer {
  padding: 10px;
  background: silver;
  position: relative;
  container-type: size;
}

.footer-wrapper {
  position: fixed;
  top: var(--header-total-height); /* 从页眉底部开始定位 */
  left: 0;
  right: 0;
  pointer-events: none; /* 不干扰下方内容的点击交互 */
}

#footer-content {
  display: none;
  background: white;
  padding: 10px;
  overflow-y: auto;
  /* 计算最大高度：视口高度 - 页眉总高度 - 页脚动态高度（100cqb为容器块轴高度） */
  max-height: calc(100vh - var(--header-total-height) - 100cqb);
  pointer-events: auto; /* 恢复自身点击事件 */
}

JavaScript（保持原有交互逻辑）

$(document).ready(function(){
    
    $('#button').click( function(e) {
        
        e.preventDefault();
        e.stopPropagation();
        $('#footer-content').toggle();
        
    });
    
    $('#footer-content').click( function(e) {
        
        e.stopPropagation();
        
    });
    
});

关键说明 #

1. CSS变量与Grid布局：通过--header-total-height统一管理页眉总高度，Grid布局确保页眉、内容区、页脚的空间划分稳定，避免布局塌陷。
2. 容器查询：为.footer设置container-type: size，使用100cqb获取页脚的动态高度，无需JS即可适配页脚的内容变化。
3. Fixed定位与高度限制：Overlay的父容器.footer-wrapper用fixed定位锚定在页眉下方，通过max-height计算确保Overlay不会超出页脚顶部，同时开启overflow-y: auto实现自身内容滚动。
4. 交互隔离：通过pointer-events属性控制交互范围，避免Overlay容器干扰下方内容的点击操作。

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