本文旨在解决如何在固定头部和底部之间创建一个可滚动的覆盖层 (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 的高度。
-
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; }
注意事项
- 确保 .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 开发场景。