想法&思路
如果是页面底部,我们可以直接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>
以上就是关于“CSS元素固定底部有什么实现方法,具体怎样做”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注恒创科技,小编每天都会为大家更新不同的知识。