一、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布局总结的更多相关文章

  1. stick footers布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  2. stlcky footers布局小技巧

    sticky-footer解决方案 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果 ...

  3. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  4. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  5. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  6. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  7. 网页footer背景(stick footer布局)

    今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...

  8. IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

    由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的 ...

  9. 项目vue2.0仿外卖APP（五）

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

随机推荐

  1. 在本地电脑使用远程服务器的图形界面——包括 MATLAB、PyCharm 等各种软件

    在用本地电脑连接远程服务器的时候,大部分时候只能用命令行来操作.虽然可以 在本地电脑用 PyCharm 进行远程调试.在本地电脑远程使用服务器的 Jupyter Notebook.Ubuntu 和 W ...

  2. 线性代数之——正交矩阵和 Gram-Schmidt 正交化

    这部分我们有两个目标.一是了解正交性是怎么让 \(\hat x\) .\(p\) .\(P\) 的计算变得简单的,这种情况下,\(A^TA\) 将会是一个对角矩阵.二是学会怎么从原始向量中构建出正交向 ...

  3. 机器学习(四)正则化与过拟合问题 Regularization / The Problem of Overfitting

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang 的个人 ...

  4. coding.net 版本控制

    这是版本测试的所有内容,其中用到了  git 和coding的远程连接. 代码及版本控制 git地址:https://git.coding.net/tianjiping/11111.git

  5. Thunder团队第三周 - Scrum会议3

    Scrum会议3 小组名称:Thunder 项目名称:i阅app Scrum Master:代秋彤 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传 ...

  6. shiro控制登陆成功后跳回之前的页面

    登陆之后跳回之前的页面是在做登陆注册模块时遇到的一个需求,也是很有必要的.若用户直接访问登陆页面,那可以控制它直接到首页,但是要用户没有登陆直接访问自己的购物车等需要经过身份认证的页面,或者因为ses ...

  7. 1001 Duplicate Pair

    1.题目戳这里 2.代码: #include<stdio.h> #include<string.h> int main() { int n; while(scanf(" ...

  8. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

  9. web前端之路 - 开篇

    一 web发展历程 了解事物的历史有助于我们渐进式的从发展的思路清楚了解事物的来龙去脉. 这里有一篇网文写得比较清晰和完整:https://www.tianmaying.com/tutorial/we ...

  10. ASP.NET 使用MVC4的EF5 Code First 入门(一)：创建数据库

    一.基本流程 建立模型→建立控制器→EF框架自动生成视图的数据库 二.基本理论 1.约定优于配置(Convention Over Configuration) 设计不好的框架通常需要多个配置文件,每一 ...