固定Header和Footer间的滚动覆盖层实现方法

一分耕耘，一分收获！既然都打开这篇《固定Header和Footer间的滚动覆盖层实现方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

本文旨在解决如何在固定头部和底部之间创建一个可滚动的覆盖层 (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;
}

代码解释

1. .footer-wrapper 的 position: absolute 使其相对于其包含块（这里是 .footer，因为 .footer 设置了 position: relative）进行定位。

2. bottom: calc(100%) 将 .footer-wrapper 的底部定位到 .footer 的顶部。这里的 100% 指的是 .footer 的高度。

3. max-height: calc(100vh - 100% - 58px) 计算 .footer-wrapper 的最大高度。其中：

   • 100vh 是视口的高度。
   • 100% 是 .footer 的高度。
   • 58px 是 .header 的高度加上 margin-top (38px + 20px)。

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

注意事项

• 确保 .footer 具有 position: relative 属性，以便 .footer-wrapper 可以相对于它进行定位。
• .header 的高度和 margin-top 值需要在 max-height 的计算中正确反映，否则 Overlay 的位置可能会不正确。
• 如果 Header 的高度是动态的，那么需要使用 JavaScript 来动态计算 max-height 的值。

总结

通过使用 CSS 的 position: absolute 和 calc() 函数，我们可以创建一个位于固定 Header 和 Footer 之间的可滚动 Overlay，无需 JavaScript 参与，并且可以适应动态的 Footer 高度。这种方法简单有效，可以应用于各种 Web 开发场景。

理论要掌握，实操不能落！以上关于《固定Header和Footer间的滚动覆盖层实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！