Stick footers布局总结
一、Sticky footers解释
在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。(效果如下图)
二、实现
2.1 容器使用负的margin bottom
首先是个包裹除了footer之外其他元素的容器,然后容器内有个占位元素,以及使用负的margin bottom,他们的绝对值相等。
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin:;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer, .push {
height: 50px;
}
2.2 底部使用负的margin bottom
既然想到在容器上使用负的margin bottom,同理可得负的margin top版本
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body
html, body {
height: 100%;
margin:;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
2.3 calc版本
结合vh单位,calc 版本就粗暴很多。
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
calc中的 70px,和50px是假定了content中最后一个元素有个20px的margin bottom,你不必在意这些~
2.4 flexbox版本
flexbox版本同样很简单,并且相比前面三种方式,它不需要知道footer的高度,避免了Magic Number的尴尬。
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex:;
}
原理是flex: 1使得content的高度可以自由伸缩。
2.5 grid版本
grid比flexbox还要新很多,使用grid同样很简洁,遗憾的是现在Chrome Canary 或者 Firefox Developer Edition才能看到效果。
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start:;
grid-row-end:;
}
文章转自: http://w3ctrain.com/2016/06/24/stick-footer/
Stick footers布局总结的更多相关文章
- stick footers布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- stlcky footers布局小技巧
sticky-footer解决方案 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果 ...
- css经典布局—Sticky footers布局
参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...
- css 中 stick footer 布局实现
做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...
- stick footer布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- css经典布局—stick footer布局
html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...
- 网页footer背景(stick footer布局)
今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...
- IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1
由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
随机推荐
- 150命令之线上查询及帮助命令 man hellp
150命令之线上查询及帮助命令 man 查询命令的帮助 man + 命令 NAME ls - list directory contents 命令+命令简单说明 SYNOPSIS ...
- Java静态方法,静态变量,初始化顺序
1. 静态方法: 成员变量分为实例变量和静态变量.其中实例变量属于某一个具体的实例,必须在类实例化后才真正存在,不同的对象拥有不同的实例变量.而静态变量被该类所有的对象公有(相当于全局变量),不需要实 ...
- python学习笔记08:安装django
linux环境安装django: sudo pip install django windows环境安装django: pip install django 验证django是否安装: python ...
- CWnd类虚函数的调用时机、缺省实现
MFC(VC6.0)的CWnd及其子类中,有如下三个函数: class CWnd : public CCmdTarget{ public: virtual BOOL PreCrea ...
- TCP系列25—重传—15、DSACK虚假重传探测
一.DSACK介绍 RFC2883通过指定使用SACK来指示接收端的重复包(duplicate packet)扩展了RFC2018对SACK选项的定义(SACK选项的介绍和示例参考前面内容).RFC2 ...
- <Effective C++>读书摘要--Introduction
Introduction 1.Learning the fundamentals of a programming language is one thing; learning how to des ...
- 【Docker 命令】 - search 命令
docker search : 从Docker Hub查找镜像 语法 docker search [OPTIONS] TERM OPTIONS说明: --automated :只列出 automate ...
- CodeForces 632E Thief in a Shop
题意:给你n种物品,每种无限个,问恰好取k个物品能组成哪些重量.n<=1000,k<=1000,每种物品的重量<=1000. 我们搞出选取一种物品时的生成函数,那么只要对这个生成函数 ...
- Django+haystack实现全文搜索出现错误 ImportError: cannot import name signals
原因是在你的settings.py或者其他地方使用了 "import haystack" 当我们使用django-haysatck库时,表面上会有haystack库,但实际上并不 ...
- SOA,ESB,WebService的关系
1. 什么是SOA SOA(Service-Oriented Architecture)既服务导向架构,是指为了解决在inernet环境下业务集成的需要,通过连接能完成特定任务的独立功能实现的一种软件 ...