CSS实现footer“吸底”效果
5星 · 超过95%的资源 190 浏览量
2020-12-13
21:44:17
上传
评论
收藏 79KB PDF 举报 
CSS实现实现footer“吸底吸底”效果效果
我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解：
一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。
二是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随
着文档流撑开，始终显示在页面的最底部。
谈到“吸底”效果的实现，大家可能较多了解到的是sticky-footer布局，但这个方式大多是用来解决第二种情况的实现。本文将采
用以下的三种方案来分别来实现以上这两种效果，并简单实现的原理以及其的适用情况。 容器（wrapper）包含两部分，分别
是内容（content）和底部需固定的区域（footer）。
html设置：
<!-- wrapper是包裹content和footer的父容器 --></div>
<div class="wrapper">
<div class="content">
<ul>
<!-- 页面主体内容区域 --></div>
<li>1.这是内容，这是内容……</li>
<li>2.这是内容，这是内容……</li>
<li>3.这是内容，这是内容……</li>
<li>4.这是内容，这是内容……</li>
<li>5.这是内容，这是内容……</li>
<li>6.这是内容，这是内容……</li>
<li>7.这是内容，这是内容……</li>
<li>8.这是内容，这是内容……</li>
<li>9.这是内容，这是内容……</li>
</ul>
</div>
<div class="footer">
<!-- 需要做到吸底的区域 -->
底部按钮
</div>
</div>
说明：以下方案的实现都基于这段html结构
方案方案1：使用：使用position对需固定元素定位对需固定元素定位
原理分析：
我们希望wrapper的外容器（包括html、body）的高度充满整个屏幕，即设置高度height:100%，且设置wrapper的min-
height:100%，这里设置的是min-height而不是height，是为了保证整个wrapper的最小高度可撑开至全屏，即使内容不足以充
满屏幕时，wrapper的高度仍是全屏的高度；当wrapper的高度随着content的高度变化而增大，它的高度是可以大于可视窗口
的高度。
设置content（需要显示内容的容器，footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，即可保证
content中内容不会被底部的footer区域所覆盖。
设置footer定位方式，这里要区别两种效果：若是希望footer固定于页面底部，此时设置wrapper的position:relative，相应地，
为footer设置position:absolute，使footer相对于wrapper绝对定位，这样一来，无论内容的多少，footer依然可以固定在页面的
最底部；而希望固定于可视窗口底部，为footer设置position:fixed，并设置相应定位即可。
设置height为固定高度值。
适用场景：
所使用的属性在各浏览器中都实现得很成熟，相比第二、三种方案，最为推荐该方法。 不适用于以下的场景：定位(fixed)的区
域中有文本框，因为在ios系统中，文本框调用输入法时，定位的区域就会往上弹，离底部有段距离。
固定于页面底部固定于页面底部
演示演示demo：：https://codepen.io/hu0950/pen/yRVvQL
css设置：
html,
body
height 100%
.wrapper
position relative // 关键
box-sizing border-box
min-height 100% // 关键
weixin_38675967
- 粉丝: 9
- 资源: 927
最新资源
- MyBatis进阶技巧：探索动态SQL的无限可能.md
- HM2300C-VB一款N-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- HM2300B-VB一款N-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- 员工解除劳动合同申请表.pdf
- 物模块模型代码，前往设计物模块所属
- mybatis动态sql（使用<where>标签来处理多个查询条件）
- Java面试手册,助力大家面试过五关斩六将,面试成功
- HITK0303MP-VB一款P-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- mybatis动态sql之xml增删改查批量操作示例EmpMapper.xml
- C/C++内存检测工具Sanitizers
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页