css如何把元素固定在容器底部的四种方式


Posted in HTML / CSS onJune 16, 2022

前几天被人问,「如何把元素固定在容器底部」。(本来想直接把 demo 地址给他,结果没找到,那么今天我们来补一下)

Demo 地址

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>

到此这篇关于css如何把元素固定在容器底部的四种方式的文章就介绍到这了,更多相关css元素固定底部内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 #HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 #HTML / CSS
css样式important规则的正确使用方式
Jun 10 #HTML / CSS
分享几个实用的CSS代码块
Jun 10 #HTML / CSS
html中两种获取标签内的值的方法
Jun 10 #HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 #HTML / CSS
基于CSS制作创意端午节专属加载特效
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
js读取cookie方法总结
2014/10/31 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
spring 项目实现限流方法示例
2022/07/15 Java/Android
vue递归实现树形组件
2022/07/15 Vue.js