创建固定 Header 和 Footer 之间的可滚动 Overlay-js教程-PHP中文网

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

霞舞

发布： 2025-11-01 16:19:22

原创

889人浏览过

创建固定 header 和 footer 之间的可滚动 overlay

本文旨在解决如何在固定头部和底部之间创建一个可滚动的覆盖层 (Overlay) 的问题。我们将利用 CSS 的定位属性和 `calc()` 函数，实现一个高度自适应的 Overlay，使其始终位于 Header 和 Footer 之间，并且内容可以滚动，无需 JavaScript 参与。

解决方案

核心思路是利用 CSS 的 position: absolute 和 calc() 函数来计算 Overlay 的高度和位置，使其始终位于 Header 和 Footer 之间，并且内容可以滚动。

HTML 结构

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

关键在于修改 footer-wrapper 和 #footer-content 的 CSS 样式：

.footer-wrapper {
  position: absolute;
  bottom: calc(100%); /* 将 wrapper 的底部定位到 footer 的顶部 */
  left: 0;
  right: 0;
  max-height: calc(100vh - 100% - 58px); /* 计算 wrapper 的最大高度 */
  overflow-y: auto; /* 允许内容滚动 */
  background-color: rgba(0, 0, 0, 0.5); /* 可选：添加背景色以区分 overlay */
}

#footer-content {
  display: none;
  background: white;
  padding: 10px;
}

登录后复制

代码解释

.footer-wrapper 的 position: absolute 使其相对于其包含块（这里是 .footer，因为 .footer 设置了 position: relative）进行定位。
bottom: calc(100%) 将 .footer-wrapper 的底部定位到 .footer 的顶部。这里的 100% 指的是 .footer 的高度。

美间AI
美间AI：让设计更简单

45

查看详情
max-height: calc(100vh - 100% - 58px) 计算 .footer-wrapper 的最大高度。其中：
- 100vh 是视口的高度。
- 100% 是 .footer 的高度。
- 58px 是 .header 的高度加上 margin-top (38px + 20px)。
overflow-y: auto 允许 .footer-wrapper 中的内容在垂直方向上滚动。

JavaScript (保持不变)

JavaScript 代码用于切换 #footer-content 的显示状态，不需要修改。

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

    });

});

登录后复制

完整 CSS 代码示例

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

.footer-wrapper
{
  position: absolute;
  bottom: calc(100%); /* 将 wrapper 的底部定位到 footer 的顶部 */
  left: 0;
  right: 0;
  max-height: calc(100vh - 100% - 58px); /* 计算 wrapper 的最大高度 */
  overflow-y: auto; /* 允许内容滚动 */
  background-color: rgba(0, 0, 0, 0.5); /* 可选：添加背景色以区分 overlay */
}

.footer
{
  position: relative;
}

登录后复制

注意事项