CSS 实现固定头尾间可滚动覆盖层：应对动态页脚高度挑战

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Long middle content.....
  </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>
</div>

.footer {
  position: relative; /* 关键：提供定位上下文 */
  padding: 10px; /* 示例：页脚的内边距 */
  background: silver; /* 示例：页脚背景 */
  /* 其他页脚样式 */
}

.footer-wrapper {
  position: absolute;
  bottom: calc(100%); /* 将覆盖层底部与页脚顶部对齐 */
  left: 0;
  right: 0; /* 使覆盖层宽度与页脚相同 */

  /* 计算最大高度：视口高度 - 页眉总高度 - 页脚自身高度 */
  /* 假设页眉总高度为 58px (20px margin-top + 10px padding-top + content height + 10px padding-bottom) */
  max-height: calc(100vh - 58px - 100%);

  overflow-y: auto; /* 关键：当内容溢出时启用垂直滚动 */
  background: white; /* 覆盖层背景 */
  padding: 10px; /* 覆盖层内边距 */
  box-sizing: border-box; /* 确保 padding 包含在 width/height 计算中 */
  z-index: 10; /* 确保覆盖层在其他内容之上 */
  display: none; /* 默认隐藏，通过 JavaScript 切换显示 */
}

/* 确保页眉的样式是固定的，以便 max-height 计算准确 */
.header {
  padding: 10px;
  background: silver;
  margin-top: 20px; /* 计入页眉总高度 */
  /* 其他页眉样式 */
}

/* 中间内容区域的滚动 */
.content {
  overflow-y: auto;
  flex-grow: 1; /* 在 flex 布局中占据剩余空间 */
  /* 其他内容样式 */
}

$(document).ready(function(){
    $('#button').click( function(e) {
        e.preventDefault(); // 阻止链接默认行为
        e.stopPropagation(); // 阻止事件冒泡
        $('.footer-wrapper').toggle(); // 切换覆盖层的显示状态
    });

    // 如果需要点击覆盖层内部不关闭，可以保留此段
    $('.footer-wrapper').click( function(e) {
        e.stopPropagation();
    });
});

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 10px;
  background: #b0c4de; /* 银色 */
  margin-top: 20px; /* 计入页眉总高度 */
  box-sizing: border-box; /* 确保 padding 包含在高度内 */
  flex-shrink: 0; /* 防止页眉被压缩 */
}

.content {
  overflow-y: auto; /* 中间内容可滚动 */
  flex-grow: 1; /* 占据剩余空间 */
  padding: 2.5rem;
  background: #ffe4e1; /* 粉色 */
  box-sizing: border-box;
}

.footer {
  position: relative; /* 关键：提供定位上下文 */
  padding: 10px;
  background: #b0c4de; /* 银色 */
  flex-shrink: 0; /* 防止页脚被压缩 */
  box-sizing: border-box;
}

.footer-wrapper {
  position: absolute;
  bottom: calc(100%); /* 底部与页脚顶部对齐 */
  left: 0;
  right: 0;
  /* max-height: 视口高度 - 页眉总高度 - 页脚自身高度 */
  /* 页眉总高度计算: 20px (margin-top) + 10px (padding-top) + content-height (e.g., ~18px) + 10px (padding-bottom) = ~58px */
  max-height: calc(100vh - 58px - 100%);

  overflow-y: auto; /* 覆盖层内容溢出时可滚动 */
  background: white;
  padding: 10px;
  box-sizing: border-box;
  z-index: 100; /* 确保在最上层 */
  display: none; /* 默认隐藏 */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* 增加阴影效果 */
}

#footer-content {
  /* 覆盖层内部内容的样式，此处无需特殊定位 */
}

/* 示例按钮样式 */
#button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}