创建固定 Header 和 Footer 之间可滚动 Overlay 的 Div

<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>

body { height: 600px; }
#content { background: salmon; display: none; height: 300px; width: 100%; }

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.5rem);
}
.header, .footer {
  padding: 10px;
  background: silver;
}

.header
{
  margin-top: 20px;
}


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

#footer-content { display: none;  background: white; padding: 10px; overflow-y:auto; position: absolute; bottom: 0; margin-bottom: 10px}

.footer-wrapper
{
  position: absolute;
  bottom: calc(100%); /* 将 footer-wrapper 的底部与 footer 的顶部对齐 */
  max-height:calc(100vh - 100% - 58px); /* 动态计算最大高度 */
  overflow-y: auto; /* 允许内容滚动 */
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 添加背景色，使其更像 Overlay */
}

.footer
{
  position: relative;
}

$(document).ready(function(){

    $('#button').click( function(e) {

        e.preventDefault(); // stops link from making page jump to the top
        e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
        $('#footer-content').toggle();

    });

    $('#footer-content').click( function(e) {

        e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too

    });

});