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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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
正则表达式语法
2006/10/09 Javascript
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP URL路由类实例
2013/11/12 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
护理专科毕业推荐信
2013/11/10 职场文书
文明学生事迹材料
2014/01/29 职场文书
平面设计求职信
2014/03/10 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
学生会工作感言
2015/08/07 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python