最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css如何把元素固定在容器底部教程
时间:2022-09-29 编辑:坚强 来源:一聚教程网
本文为小伙伴们带来的是关于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 空间。
absolute 实现
如果 calc 兼容性不太好,那么还可以使用 absolute 将所有元素都脱离文档流。
以上就是关于css如何把元素固定在容器底部教程的全部内容了,感兴趣的小伙伴记得点击关注哦。
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26