本教程旨在解决当页面内容高度超过视口时，固定定位在底部的 div 遮挡其他内容的问题。我们将通过使用 Flexbox 布局，确保底部 div 始终位于页面底部，且不会覆盖动态高度的内容区域，从而提供更好的用户体验。
使用 Flexbox 实现底部固定且不遮挡内容的效果
当我们需要将一个 div 固定在页面底部，并且希望它不遮挡页面上的其他动态内容（例如手风琴组件）时，仅仅使用 position: fixed; bottom: 0; 可能会出现问题，特别是当内容高度超过视口时。一个更健壮的解决方案是利用 Flexbox 布局。
核心思想
Flexbox 布局允许我们轻松地控制页面元素的排列方式，并根据内容自适应调整。 通过将 body 元素设置为 Flex 容器，并设置 flex-direction: column，我们可以将页面内容按垂直方向排列。 关键在于使用 flex: 1 将主要内容区域（例如 ain> 元素）设置为弹性伸缩，使其占据剩余空间，从而将底部 div 推到页面底部。
具体实现步骤
将 body 元素设置为 Flex 容器：
body { display: flex; min-height: 100vh; /* 确保容器至少占据整个视口高度 */ flex-direction: column; /* 垂直排列子元素 */ margin: 0; /* 移除默认的 body margin */}
display: flex; 启用 Flexbox 布局。min-height: 100vh; 确保 Flex 容器至少占据整个视口的高度，即使内容很少。flex-direction: column; 指定主轴方向为垂直方向，这意味着子元素将垂直排列。margin: 0; 移除浏览器默认的 body 边距，避免不必要的空白。
设置主要内容区域的弹性伸缩：
main { flex: 1; /* 占据剩余空间 */}
flex: 1; 让 main 元素占据所有剩余的垂直空间。这会将底部 div 推到页面底部。flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写。
创建页面结构：
HEADING.... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum?
添加样式（可选）：
header { background-color: silver;}main { background-color: deepskyblue;}footer { background-color: tomato;}
这些样式仅用于演示目的，可以根据实际需求进行调整。
完整示例
Fixed Bottom Footer body { margin: 0; display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1; } header { background-color: silver; padding: 10px; } main { background-color: deepskyblue; padding: 20px; } footer { background-color: tomato; padding: 10px; text-align: center; }HEADING.... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum?
注意事项
确保 body 元素的 min-height 设置为 100vh，这样即使内容很少，页脚也会固定在视口底部。main 元素的 flex: 1 是关键，它会占据剩余空间，并将页脚推到页面底部。根据实际需求调整 header、main 和 footer 的样式。
总结
通过使用 Flexbox 布局，我们可以轻松地实现底部固定且不遮挡内容的效果，从而提供更好的用户体验。这种方法比仅仅使用 position: fixed 更加灵活和健壮，尤其是在处理动态高度的内容时。 掌握 Flexbox 布局对于现代 Web 开发至关重要。
以上就是如何防止固定定位的 div 遮挡其他内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1577118.html
微信扫一扫 
支付宝扫一扫 
