css sticky footer实现,css sticky footer经典布局
什么是sticky footer布局?
一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部;当内容高度超过一屏时,页脚紧随其后。
方法一:flex弹性盒子布局
父容器container的display为flex,并规定项目排列顺序是纵向的
content元素的flex为1,即有多余空间就增大
footer定义一个高度
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
/*非必须*/
width: 100%;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
background-color: #71a8da;
/*非必须*/
}
.footer {
height: 60px;
/*非必须*/
width: 100%;
line-height: 60px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
background-color: #f85f2f;
/*非必须*/
}
方法二:padding-bottom+负margin-top
容器wrapper需要指定min-height为100vh(vh:视窗高度)
内容写在content容器里,指定padding-bottom为footer容器的高度
footer指定高度和margin-top,并且margin-top为高度的负值
body {
margin: 0;
}
.wrapper {
width: 100%;
min-height: 100vh;
}
.content {
/*padding-bottom应等于footer的高度*/
padding-bottom: 60px;
/*非必须*/
width: 100%;
height: 400px;
line-height: 400px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
background-color: #71a8da;
/*非必须*/
}
.footer {
/*margin-top应等于footer高度的负值*/
margin-top: -60px;
height: 60px;
/*非必须*/
width: 100%;
line-height: 60px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
background-color: #f85f2f;
/*非必须*/
}
提示:两个/**非必须**/之间的部分不是实现sticky footer布局的必要代码,只是一些辅助样式,可以删除
css sticky footer实现,css sticky footer经典布局相关推荐
- 8个有用的 CSS 技巧:视差图像,sticky footer 等等
译者:前端小智 原文:https://medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tric ...
- 如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...
- css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
- 最窄770PX最宽1024PX经典布局[DIV+CSS]
最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点: 1. 中间三列效果,可以任意实现单列背景色. 2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果 ...
- 【聊一聊】css中的经典布局——双飞翼布局
上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...
- CSS经典布局--圣杯布局和双飞翼布局
圣杯布局与双飞翼布局,都是属于三列布局的经典布局. 双飞翼布局是圣杯布局的优化版,由淘宝UED提出: 它们的效果图类似,但是实现方法不同. 文章目录 一.圣杯布局和双飞翼布局的常规方法 1.圣杯 po ...
- html 左边固定右边自动,css经典布局之左侧固定大小右侧自动适应
本文作者:IMWeb 赛冷思 未经同意,禁止转载 最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家 ...
- vue或者react的css样式初始(css样式重置)——reset.css与normalize.css
前言 为什么要样式重置即 css reset ? 原因:不同的浏览器在实现w3c标准过程中,对各个元素的实现是不一致的.这就导致了同一个页面在不同的浏览器中比如ie和chrome中,表现有差异.为了解 ...
- 2019 css 框架_宣布CSS 2019调查状态
2019 css 框架 by Sacha Greif 由Sacha Greif 宣布#StateOfCSS 2019调查 (Announcing the #StateOfCSS 2019 Survey ...
最新文章
- 关于Mybatis查询结果的封装
- SYMBDSNAP_SDK[3943]: Failed to open device: /dev/symbdsnapctl, errno: 2
- apple music有一点坏处。。这个乱码有点不本土化啊
- 一页纸项目管理模板_项目管理职场必备读物!这一次全部送给你!
- python 比较序列是否包含同样元素_Python学习之常见序列比较
- bootstrap table 服务器端分页例子
- python自动化上传文件_python接口自动化测试二十三:文件上传
- win8 64位 iis8 安装.net1.1
- QLineEdit用正则表达式限制double类型输入,double转为9位小数的字符串
- ISO27001标准的起源和发展
- Axure RP 9(附授权码+安装教程)
- C#窗体标准计算器(下) 初级新手请多担待。
- ps制作哈7海报字体
- Postman测试json格式的post请求
- 「测试开发工程师」和「软件测试工程师」有什么区别?
- SATA 模式相关概念
- 微生物组-扩增子16S分析和可视化(2022.10)
- linux mv中途进程断掉,shell入门
- STM32的SPI及IIC
- 2021年危险化学品经营单位安全管理人员考试报名及危险化学品经营单位安全管理人员找解析