本文旨在解决如何在固定头部和底部之间创建一个可滚动的覆盖层 (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 开发场景。
以上就是创建固定 Header 和 Footer 之间的可滚动 Overlay的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534489.html
微信扫一扫 
支付宝扫一扫 
