基于CSS怎样将元素固定容器底部，有什么方法
发布时间：2023-06-24 15:34:34 所属栏目：语言 来源：
导读：这篇文章给大家分享的是基于CSS怎样将元素固定容器底部，有哪些方法。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
|
这篇文章给大家分享的是基于CSS怎样将元素固定容器底部，有哪些方法。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 想法&思路 如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。 但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了 relative 来限制 absolute，然后 bottom: 0，但是在内容过长的时候会导致显示异常。所以我们需要做内部滚动。 如果做内部滚动，那么我们只要可以撑开盒子即可。不需要绝对定位了 使用 flex 实现 父级使用 flex 布局，column 垂直排列。 父级定高（height、maxHeight），.content 子级 flex:auto; 自动撑开。 或者 .content 做高度限制。 footer 可以使用 absolute 加 padding 。或者完全依赖文档流布局都可以 .demo1{ position: relative; padding-bottom: 40px; display: inline-flex; flex-direction: column; } .demo1 .footer{ position: absolute; bottom: 0; left: 0;right: 0; margin: 0; } .demo1 .content{ overflow: auto; } calc 实现 如果不使用 flex ，那么我们可以用 calc 来减去 header 和 footer 空间。 <style> .demo3{ position: relative; } .demo3 .content{ overflow: auto; max-height: calc(100% - 40px); } </style> absolute 实现 如果 calc 兼容性不太好，那么还可以使用 absolute 将所有元素都脱离文档流。 <style> .demo4{ position: relative; } .demo4 .header,.demo4 .footer{ position: absolute; margin: 0; top:0;left:0 ;right:0; } .demo4 .footer{ top: auto; bottom: 0; } .demo4 .content{ overflow: auto; height: 100%; padding-top: 30px; padding-bottom: 30px; margin: 0; box-sizing: border-box; } </style> （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
