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实现图片翻牌特效
Mar 10 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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
PHP 类相关函数的使用详解
2013/05/10 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
python测试驱动开发实例
2014/10/08 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
import的本质解析
2017/10/30 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
PyQt实现计数器的方法示例
2021/01/18 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
给民警的表扬信
2014/01/08 职场文书
周年庆典主持词
2014/04/02 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python