本文旨在解决如何在固定头部和底部之间创建一个可滚动的覆盖层 (Overlay) 的问题。我们将利用 CSS 的定位属性和 `calc()` 函数，实现一个高度自适应的 Overlay，使其始终位于 Header 和 Footer 之间，并且内容可以滚动，无需 JavaScript 参与。
解决方案
核心思路是利用 CSS 的 position: absolute 和 calc() 函数来计算 Overlay 的高度和位置，使其始终位于 Header 和 Footer 之间，并且内容可以滚动。
HTML 结构
HTML 结构保持不变，如下所示：
HeaderLong middle content.....
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 开发场景。
