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属性选择符介绍
Oct 17 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
css3应用示例:新增的选择器
Mar 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
PHP操作XML作为数据库的类
2010/12/19 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
List Installed Software Features
2007/06/11 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
Openlayers实现地图的基本操作
2020/09/28 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Django之模板层的实现代码
2019/09/09 Python
没编程基础可以学python吗
2020/06/17 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
数控专业个人求职信范例
2013/11/29 职场文书
益达广告词
2014/03/14 职场文书
岗位竞聘书范文
2014/03/31 职场文书
经营理念口号
2014/06/21 职场文书
本科应届生求职信
2014/08/05 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
工作失误检讨书
2015/01/26 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书