本文介绍如何使用 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 高度。 这种方法简洁高效，适用于各种需要类似布局的场景。