原文转载于:https://cnodejs.org/topic/56ebdf2db705742136388f71

何为Sticky footer布局?

  我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。

Sticky footer布局实现

一、负 margin 布局方式

<div class="detail">
<div class="wrapper clearfix">
<div class="title">
<h1>这里是头部</h1>
</div>
<div class="main">
<p>这里是main content区域...</p>
<p>这里是main content区域...</p>
<p>这里是main content区域...</p>
<p>这里是main content区域...</p>
</div>
</div>
</div>
<div class="footer">
<p>© 2017 No rights reserved.</p>
<p>Made with ♥ by an anonymous pastafarian.</p>
</div>

!!!特别说明!!!:使用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。如果确实需要到添加其它同级层,那这个同级层就必须使用position:absolute进行绝对定位。

* {margin: 0; padding: 0; text-align: center;}
html,body,.detail {height: 100%;}
body>.detail {height: 100%; min-height: 100%;}
.main {padding-bottom: 64px;}
.footer {position: relative; margin-top: -64px; height: 64px; clear: both; background-color: red;} .clearfix::after { /* 测试于两栏悬浮布局 */
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}

PC端效果图:


移动端效果图: 

二、flex 布局方式

<header>
<h1>Site name</h1>
</header>
<div class="main">
<p>Bacon Ipsum dolor sit amet...</p>
<p>Bacon Ipsum dolor sit amet...</p>
<p>Bacon Ipsum dolor sit amet...</p>
<p>Bacon Ipsum dolor sit amet...</p>
</div>
<footer>
<p>© 2017 No rights reserved.</p>
<p>Made with ♥ by an anonymous pastafarian.</p>
</footer>
* {margin: 0; padding: 0;}
body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;}
h1{font-size: 60px; text-align: center;}
p{font-size: 24px; text-align: center;}
.main{flex:1;} /* 若不懂请看本文末尾的链接 */
footer{background-color: red;}

PC端效果图: 

移动端效果图: 
 
flex布局结构简单,代码精简。因为flex存在着兼容性,所以在使用这种方式布局时需要注意。

Sticky footer经典布局--绝对底部布局的更多相关文章

  1. 前端经典布局:Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  2. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  3. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  4. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  5. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  6. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  7. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  8. Sticky Footer 绝对底部的两种套路

    最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...

  9. Sticky Footer,完美的绝对底部

    写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...

随机推荐

  1. pyinstaller模块

    应用场景: 1 把一些python脚本推广到更多机器上运行,但无法保证他们都有安装python解释器,所以,打包可以免去这一障碍 win: 安装: 在cmd中运行pip install pyinsta ...

  2. 微信BUG之微信内置的浏览器中window.location.href 不跳转

    最近做微信开发遇到这个问题,查了一些文档,总结一下 1.url后面加参数 indow.location.href = url +'?timestamp='+ new Date().getTime()+ ...

  3. Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses

    Bryce1010模板 http://codeforces.com/contest/1000/problem/E 题意: 给一个无向图,求图的最长直径. 思路:对无向图缩点以后,求图的最长直径 #in ...

  4. Educational Codeforces Round 46 (Rated for Div. 2) C. Covered Points Count

    Bryce1010模板 http://codeforces.com/problemset/problem/1000/C 题意:问你从[l,r]区间的被多少条线覆盖,列出所有答案. 思路:类似括号匹配的 ...

  5. (转) ACM必备(学完一个就加亮一个)不多,就这些!

    时间复杂度(渐近时间复杂度的严格定义,NP问题,时间复杂度的分析方法,主定理)排序算法(平方排序算法的应用,Shell排序,快速排序,归并排序,时间复杂度下界,三种线性时间排  序,外部排序)数论(整 ...

  6. Mysql常用命令行大全(转)

    第一招.mysql服务的启动和停止 net stop mysql net start mysql 第二招.登陆mysql 语法如下: mysql -u用户名 -p用户密码 键入命令mysql -uro ...

  7. sql子查询的例子

    1.单行子查询        select ename,deptno,sal        from emp        where deptno=(select deptno from dept ...

  8. winform 打印小票

    后台代码 panPrintContent.Visible = true; var strlPrinterMode = ""; ; ; ; ; panPrintContent.Vis ...

  9. FPGA内部RAM的初始化

    Altera的RAM初始化文件格式是mif和hex. QuartusII自带的RAM初始化工具很方便产生初始化文件. Xilinx的RAM初始化文件格式是coe, 在vivado中软件会将coe文件变 ...

  10. 【数据分析 R语言实战】学习笔记 第六章 参数估计与R实现(下)

    6.3两正态总体的区间估计 (1)两个总体的方差已知 在R中编写计算置信区间的函数twosample.ci()如下,输入参数为样本x, y,置信度α和两个样本的标准差. > twosample. ...