本文介绍如何使用 HTML 和 CSS 创建一个位于固定 Header 和 Footer 之间的可滚动 Overlay Div。该 Overlay 在 Footer 内展开，且不与 Header 或 Footer 重叠，同时内容支持滚动。该方案无需 JavaScript 即可实现动态 Footer 高度的适应。
实现原理
核心思路是利用 CSS 的 calc() 函数和相对定位，动态计算 Overlay Div 的最大高度，使其始终位于 Header 和 Footer 之间。通过将 footer-wrapper 相对于 footer 定位，并利用 bottom: calc(100%) 将其底部与 footer 的顶部对齐。 然后，使用 max-height: calc(100vh - 100% - headerHeight) 计算 footer-wrapper 的最大高度，其中 100vh 是视口高度，100% 是 footer 的高度，headerHeight 是 header 的高度。
代码示例
以下代码展示了如何实现这一效果：
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:
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;
}JavaScript (用于切换 Overlay 的显示/隐藏):
$(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 说明:
- .footer-wrapper:
- position: absolute;: 使其相对于 footer 定位。
- 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-content 在超出 max-height 时滚动。
- .footer:
- position: relative;: 为 footer-wrapper 提供定位的参照物。
注意事项
- Header 高度: max-height 的计算需要准确的 Header 高度。如果 Header 高度是动态的，则需要使用 JavaScript 来动态更新 max-height 的值。
- Footer 高度: 该方案可以适应动态的 Footer 高度，无需 JavaScript 计算。
- CSS 兼容性: 确保 calc() 函数在目标浏览器中得到支持。
- Overlay 背景色: 可以根据需要调整 footer-wrapper 的背景色，使其更像一个 Overlay。
- JavaScript: 上述 JavaScript 代码仅用于切换 Overlay 的显示/隐藏。核心的布局和滚动功能完全由 HTML 和 CSS 实现。
总结
通过结合 CSS 的 calc() 函数、相对定位和 overflow-y: auto，我们可以创建一个灵活且无需 JavaScript 的可滚动 Overlay Div，该 Overlay 位于固定 Header 和 Footer 之间，并能适应动态的 Footer 高度。 这种方法简洁高效，适用于各种需要类似布局的场景。
