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实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP令牌 Token改进版
2008/07/18 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
详解如何较好的使用js
2016/12/16 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python实现定时任务
2017/02/08 Python
深入理解Python中的super()方法
2017/11/20 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python函数参数分类原理详解
2020/05/28 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
领导班子自我剖析材料
2014/08/16 职场文书
人生遥控器观后感
2015/06/11 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Go 语言中 20 个占位符的整理
2021/10/16 Golang