flex 底部固定_详解八种方法实现CSS页面底部固定
当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部,
方法一:footer高度固定+绝对定位
html
Header
Content
Footer
CSS
.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}
方法二:在主体content上的下边距增加一个负值等于底部高度
html
Header
Content
Footer
CSS
html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
方法三:将页脚的margin-top设为负数
html
Header
Content
Footer
CSS
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}
方法四: 通过设置flex,将footer的margin-top设置为auto
html
Header
Content
Footer
CSS
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}
方法五: 通过函数calc()计算内容的高度
html代码
Header
Content
Footer
CSS代码
main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}
方法六: 通过设置flexbox,将主体main设置为flex
html
Header
Content
Footer
CSS代码
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}
方法七: 使用grid布局
Html代码
Header
Content
Footer
CSS代码
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}
方法八: display-*
html
Header
Content
Footer
CSS
body {
min-height: 100%;
display: table;
width: 100%;
}
main {
display: table-row;
height: 100%;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
flex 底部固定_详解八种方法实现CSS页面底部固定相关推荐
- mysql事务怎么加排他锁_八种方法实现CSS页面底部固定 - SegmentFault 思否
共享锁.排他锁 InnoDB 实现了两种类型的锁机制:共享锁(S)和排他锁(X).共享锁允许一个事务读数据,不允许修改数据,如果其他事务要再对该行加锁,只能加共享锁:排他锁是修改数据时加的锁,可以读取 ...
- C语言中三个数比较大小详解——三种方法
C语言中三个数比较大小详解--三种方法 方法一:if-else法 方法二:函数法 方法三:三目运算符法 C语言中比较三个数的大小有很多方法,以下是我总结的三种方法: 首先我定义 int a = 1 ...
- postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
- java实现线程三种方式_详解三种java实现多线程的方式
java中实现多线程的方法有两种:继承Thread类和实现runnable接口. 1.继承Thread类,重写父类run()方法 public class thread1 extends Thread ...
- linux修改文件内容_详解5种实用方法---Linux系统清空或删除大文件内容
概述 有时我们在处理Linux终端中的文件时,可能要去清除文件的内容,而无需使用任何Linux命令行编辑器打开它.怎么才能实现呢?下面通过几种不同的方式教大家清空文件内容. 1.通过重定向到空来清空文 ...
- mysql 魔术设置_详解php魔术方法(Magic methods)的使用方法
PHP中把以两个下划线__开头的方法称为魔术方法,这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __destruct(),类的析构函数 __cal ...
- 图片轮播的实现(详解两种方法)
今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式.(图片我放在文末了) 当然也有更复杂的图片,也会 ...
- 235、一个带宽如何连接两个路由器?详解两种方法
于一个网络如何连接两个路由器?家里房间比较多,之前已经安装了一个无线路由器,但是在某些房间信号很差,想再增加一个无线路由器怎么办? 实现一个带宽连接两个路由器,有两种方法: 1.二级路由器 2.无线桥 ...
- 电阻参数_详解几种常用电阻参数的表示方法
电阻是非常常见的电子元器件,前面我们介绍过常见的电阻分类,几种常见特殊电阻及电阻的检测方法,今天让我们一起来学一学电阻参数的几种常用的表示方法. 电阻的参数主要有直标法.文字符号法.色标法和数码表示法 ...
最新文章
- 复旦邱锡鹏教授公布《神经网络与深度学习》,中文免费下载 | 极客头条
- k-近邻算法之距离度量
- Angular中使用axios实现get请求数据
- leetcode第七题整数反转
- 此microsoft fix it不适用于您的操作系统 解决方案
- linux操作系统信号捕捉函数之回调函数小结
- DataTable不能通过已删除的行访问该行的信息解决方法
- python判断语句的复杂度_Python内置方法的时间复杂度(转)
- 抱歉(HDU-1418)
- 对于已经加入版本控制的文件,我们可以强制忽略文件git update-index --assume-unchanged local.properties...
- python学习笔记(图形用户界面)
- 190129每日一句
- 如何提高BT的下载速度?
- win10 cuda13 pytorch pycharm
- Dynamo常用节点包下载方法
- 【矿渣】【玩客云】玩客云驱动OLED屏幕
- iOS永久签名不掉签工具,轻松签超详使用教程
- 关于小G蛋白活化检测试剂盒
- 7——18 day 24 35min 类属性
- 日立电梯中标武汉地铁16号线 支持江城轨道交通复工建设
热门文章
- 通达OA 与中控考勤机同步 最优http方案 附源码
- 51单片机 (十二)PWM
- 噪声与振动控制行业的发展和展望
- vmware 虚拟机下 ubuntu 与主机共享锐捷
- Ubuntu sources.list 换清华源
- 趣题:正方形的边长是多少?
- Inventor安装失败怎样卸载重新安装Inventor,解决Inventor安装失败的方法总结
- SmartMemoryCleaner for Mac(内存清理工具)
- 接口获取行政区划代码_行政区域查询-API文档-开发指南-Web服务 API | 高德地图API...
- 国际多语言出海商城返佣产品自动匹配订单源码