Sticky footer经典布局--绝对底部布局
原文转载于: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经典布局--绝对底部布局的更多相关文章
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- Sticky Footer,完美的绝对底部
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
随机推荐
- April Fools Contest 2017 E
Description Input The input consists of four lines, each line containing a single digit 0 or 1. Outp ...
- 素数+map BestCoder Round #54 (div.2) 1002 The Factor
题目传送门 题意:给出一个数列,问数列的乘积的一个满足条件的最小因子是什么,没有输出-1.条件是不是素数 分析:官方题解:对于每一个数字,它有用的部分其实只有它的所有质因子(包括相等的).求出所有数的 ...
- page.php 引入js文件
2种写法 <script type='text/javascript' src='<?php echo get_template_directory_uri().'/js/jquery-1 ...
- 【前端】jQurey Plugin
; (function ($, window, document, undefined) { "use strict"; var defaults = { name: " ...
- 【转】几种Java序列化方式的实现
0.前言 本文主要对几种常见Java序列化方式进行实现.包括Java原生以流的方法进行的序列化.Json序列化.FastJson序列化.Protobuff序列化. 1.Java原生序列化 Java原生 ...
- PKU_campus_2017_K Lying Island
思路: 题目链接http://poj.openjudge.cn/practice/C17K/ 状压dp.dp[i][j]表示第i - k人到第i人的状态为j的情况下前i人中最多有多少好人. 实现: # ...
- joomla多语言建站之默认前台语言设置
joomla多语言建站后,如果想设置其中一种语言为默认前台语言,即: 从后台点击“Site Name”跳转时: 访问域名时: 页面自动切换至某一种语言,可以在后台通过“语言管理”模块来实现,将“网站前 ...
- 使用vbScript 链接SQLserver数据库和基础操作
使用vbs链接SQLserver数据库 数据库的创建.设计使用 management studio完成 1.本地链接数据库 set oCon = server.createObject("a ...
- Qt和Cocoa混合编程
https://el-tramo.be/blog/mixing-cocoa-and-qt/
- Cognos报表验证(添加字段)
1.打开后台Cognos 链接远程后台Cognos 2.打开要验证的报表 3.给右边的sql语句加个空格或者换行点击验证 4.查看业务视图中是否已经添加该字段 双击维度或者度量(添加字段所在的分类) ...