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 ...
随机推荐
- Android - TabHost 选项卡功能用法详解
TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105 . 作者 :万境绝尘 转载请注明出处 ...
- windows编程了解
文章:浅谈Windows API编程 (这个经典)
- Tomcat服务器学习和使用(一)
一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...
- 二叉树及其遍历方法---python实现
github:代码实现 本文算法均使用python3实现 1. 二叉树 1.1 二叉树的定义 二叉树是一种特殊的树,它具有以下特点: (1)树中每个节点最多只能有两棵树,即每个节点的度最多为2 ...
- OSG学习：使用已有回调示例
回调的类型有很多种,一般很容易就想到的是UpdateCallBack,或者EventCallBack,回调的意思就是说,你可以规定在某件事情发生时启动一个函数,这个函数可能做一些事情.这个函数就叫做回 ...
- 《Effective C#》快速笔记（四）- 使用框架
.NET 是一个类库,你了解的越多,自己需要编写的代码就越少. 目录 三十.使用重写而不是事件处理函数 三十一.使用 IComparable<T> 和 IComparer<T> ...
- Windows API封装:LoadLibrary/FreeLibrary
LoadLibrary/LoadLibraryEx用来加载DLL到自己的进程空间,使用完用FreeLibrary释放,一般使用方式如下: HINSTANCE hInstRich = ::Load ...
- [Leetcode] 1.Two Sum（unordered_map）
1.首先想到的方法就是两个for循环全部遍历,代码如下,可通过,但效率太低 class Solution { public: vector<int> twoSum(vector<in ...
- bootstrap 有些控件需要调用锚点，会与angular 路由 冲突
最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 ang ...
- jsp文件过大，is exceeding 65535 bytes limit
今天修改配置项的时候,遇到了一个异常,Generated servlet error:The code of method _jspService(HttpServletRequest, HttpSe ...