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;
}
  1. 这个方法需要容器里有额外的占位元素(div.push)。

  2. div.wrappermargin-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.contentdiv.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 置底的更多相关文章

  1. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  2. jmeter关联的五种方式

    [脚本准备] 这里,我们用dummy取样器来模拟服务器的返回,通过关联获取name的值,然后接口取这个name的值,这就我们就简单模拟了请求间的依赖关系 在取样器中添加dummy取样器 搜索的关键字是 ...

  3. 五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

  4. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  5. javaScript中定义类或对象的五种方式

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...

  6. Spring事务配置的五种方式(转载)

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  7. Spring事务配置的五种方式

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  8. Android数据存储五种方式总结

    本文介绍Android平台进行数据存储的五大方式,分别如下: 1 使用SharedPreferences存储数据     2 文件存储数据       3 SQLite数据库存储数据 4 使用Cont ...

  9. Mysql查看版本号的五种方式介绍

    Mysql查看版本号的五种方式介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-03   一.使用命令行模式进入mysql会看到最开始的提示符;二.命令行中使用status可以看到 ...

随机推荐

  1. 二十六、MySQL 临时表

    MySQL 临时表 MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如 ...

  2. 麦子学院python开发全套完整无加密课程

    点击了解更多Python课程>>> 麦子学院python开发全套完整无加密课程 第一阶段:Python基础准备 1.Web前端开发之HTML+CSS基础入门 2.Javascript ...

  3. php v8js

    本文整理自大神 Corz 1.php56 /datas/soft/php56/bin/php -v PHP (cli) #https://blog.csdn.net/lzm198707/article ...

  4. Python中的dict

    dict_lst = [ ('字典的键必须可哈希',), ('字典的键重复覆盖',), ('字典可迭代') ('增',), ('删',), ('改',), ('查',), ('练习',), ] 字典的 ...

  5. Creating Hyperv Agent Installer

    Creating Hyperv Agent Installer   Skip to end of metadata   Created by Anshul Gangwar, last modified ...

  6. Windows Server 笔记(七):Windows Server 2012 R2 NIC Teaming(NIC组)

    什么是NIC Teaming?         NIC Teaming 就是将两个或更多的网络适配器组合在一起,从而达到容错和带宽聚合作用.NIC Teaming 中的每个网络适配器都是物理存在的(虚 ...

  7. Shell脚本编程

    1.linux中的变量 linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结束后变量无法保留 ...

  8. Detect Vertical&Horizontal Segments By OpenCV

    Detect Vertical&Horizontal Segments By OpenCV,and Save the data to csv. Steps: Using adaptiveThr ...

  9. vlc无法播放.flv视频文件

    解决方法:https://videoconverter.wondershare.com/vlc/flv-not-displaying-video-vlc-media-player.html. 在pre ...

  10. 菜鸟之路——Linux基础::计算机网络基础,Linux常用系统命令,Linux用户与组权限

    最近又重新安排了一下我的计划.准备跟着老男孩的教程继续学习,感觉这一套教程讲的很全面,很详细.比我上一套机器学习好的多了. 他的第一阶段是Python基础,第二阶段是高等数学基础,主要将机器学习和深度 ...