CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底
页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部。
当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部; 但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。
方法一:将内容部分的margin-bottom
设为负数
<div class="wrapper">
<!-- content -->
<div class="push"></div>
</div>
<div class="footer">footer</div>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
height: 50px;
}
这个方法需要容器里有额外的占位元素(
div.push
)。div.wrapper
的margin-bottom
需要和div.footer
的-height
值一样,注意是负height
。
方法二:将页脚的margin-top
设为负数
- 给内容外增加父元素,并让内容部分的
padding-bottom
与页脚的height
相等。
<div class="content">
<div class="content-inside">
<!-- content -->
</div>
</div>
<div class="footer">footer</div>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
方法三:使用calc()
设置内容高度
<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
- 这里假设
div.content
和div.footer
之间有20px的间距,所以70px=50px+20px
方法四:使用flexbox弹性盒布局
以上三种方法的footer高度都是固定的,如果footer的内容太多则可能会破坏布局。
<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
方法五:使用Grid网格布局
<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
CSS 五种方式实现 Footer 置底的更多相关文章
- CSS五种方式实现 Footer 置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...
- jmeter关联的五种方式
[脚本准备] 这里,我们用dummy取样器来模拟服务器的返回,通过关联获取name的值,然后接口取这个name的值,这就我们就简单模拟了请求间的依赖关系 在取样器中添加dummy取样器 搜索的关键字是 ...
- 五种方式让你在java中读取properties文件内容不再是难题
一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...
- Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
- javaScript中定义类或对象的五种方式
第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...
- Spring事务配置的五种方式(转载)
Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...
- Spring事务配置的五种方式
Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...
- Android数据存储五种方式总结
本文介绍Android平台进行数据存储的五大方式,分别如下: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用Cont ...
- Mysql查看版本号的五种方式介绍
Mysql查看版本号的五种方式介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-03 一.使用命令行模式进入mysql会看到最开始的提示符;二.命令行中使用status可以看到 ...
随机推荐
- form中 单选框 input[type="radio"] 分组
在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...
- 精读《Epitath 源码 - renderProps 新用法》
1 引言 很高兴这一期的话题是由 epitath 的作者 grsabreu 提供的. 前端发展了 20 多年,随着发展中国家越来越多的互联网从业者涌入,现在前端知识玲琅满足,概念.库也越来越多.虽然内 ...
- Emgu.CV.CvInvoke的类型初始值设定项引发异常
被这个问题蛋疼了一个下午,终于解决了.我的服务器出现这个问题的原因:可能是没有安装emgucv. 解决方法: 1.下载并安装emgucv 下载地址:链接: https://pan.baidu.com/ ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- 02 python网络爬虫《Http和Https协议》
一.HTTP协议 1.概念: Http协议就是服务器(Server)和客户端(Client)之间进行数据交互(相互传输数据)的一种形式. 之间形成的特殊行话(黑话:(土匪)天王盖地虎,(我)宝塔镇河妖 ...
- [Python]有关pygame库中的flip和update的区别
pygame.display.flip()和pygame.display.update()的用法上的区别: 资料一. 资料二. (资料最后更新时间:2019年1月9日)
- 最小生成树:POJ1251-Jungle Roads(最小生成树的模板)
POJ 1251 Jungle Roads >[poj原址:http://poj.org/problem?id=1251](http://poj.org/problem?id=1251) Des ...
- 使用FileSystem类进行文件读写及查看文件信息
使用FileSystem类进行文件读写及查看文件信息 在这一节我们要深入了解Hadoop的FileSystem类——这是与与hadoop的文件系统交互的重要接口.虽然我们只是着重于HDFS的实现, ...
- Java技术——Java多线程学习
)适合多个相同程序代码的线程区处理同一资源的情况.比如下面这个买票的例子. //使用Thread实现 public static class MyThread extends Thread{ priv ...
- Aizu 2560 Point Distance FFT
题意: 有一个\(N \times N\)的方阵,第\(x\)行第\(y\)列有\(C_{x,y}\)个点\((0 \leq C_{x,y} \leq 9)\). 任选两个不同的点,求两点欧几里德距离 ...