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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php中如何执行linux命令详解
2018/11/06 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
python传递参数方式小结
2015/04/17 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
phpquery中文手册
2021/03/18 PHP
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
剪彩仪式主持词
2014/03/19 职场文书
中学生自我评价范文
2015/03/03 职场文书
药品开票员岗位职责
2015/04/15 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫