本文介绍如何使用 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:
HeaderLong middle content.....
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 高度。 这种方法简洁高效，适用于各种需要类似布局的场景。
以上就是创建固定 Header 和 Footer 之间可滚动 Overlay 的 Div的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534507.html
微信扫一扫 
支付宝扫一扫 
