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可以看到 ...
随机推荐
- 二十六、MySQL 临时表
MySQL 临时表 MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如 ...
- 麦子学院python开发全套完整无加密课程
点击了解更多Python课程>>> 麦子学院python开发全套完整无加密课程 第一阶段:Python基础准备 1.Web前端开发之HTML+CSS基础入门 2.Javascript ...
- php v8js
本文整理自大神 Corz 1.php56 /datas/soft/php56/bin/php -v PHP (cli) #https://blog.csdn.net/lzm198707/article ...
- Python中的dict
dict_lst = [ ('字典的键必须可哈希',), ('字典的键重复覆盖',), ('字典可迭代') ('增',), ('删',), ('改',), ('查',), ('练习',), ] 字典的 ...
- Creating Hyperv Agent Installer
Creating Hyperv Agent Installer Skip to end of metadata Created by Anshul Gangwar, last modified ...
- Windows Server 笔记(七):Windows Server 2012 R2 NIC Teaming(NIC组)
什么是NIC Teaming? NIC Teaming 就是将两个或更多的网络适配器组合在一起,从而达到容错和带宽聚合作用.NIC Teaming 中的每个网络适配器都是物理存在的(虚 ...
- Shell脚本编程
1.linux中的变量 linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结束后变量无法保留 ...
- Detect Vertical&Horizontal Segments By OpenCV
Detect Vertical&Horizontal Segments By OpenCV,and Save the data to csv. Steps: Using adaptiveThr ...
- vlc无法播放.flv视频文件
解决方法:https://videoconverter.wondershare.com/vlc/flv-not-displaying-video-vlc-media-player.html. 在pre ...
- 菜鸟之路——Linux基础::计算机网络基础,Linux常用系统命令,Linux用户与组权限
最近又重新安排了一下我的计划.准备跟着老男孩的教程继续学习,感觉这一套教程讲的很全面,很详细.比我上一套机器学习好的多了. 他的第一阶段是Python基础,第二阶段是高等数学基础,主要将机器学习和深度 ...