什么是Sticky footer布局？
前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时候，页脚区块会被内容向下推送。可以以下图展示Sticky footer实现的效果：

在正常的文档流中，页面内容较少的时候，如果不做处理，页脚部分不是固定在视窗底部的。

使用sticky footer布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。

实现方式
首先构建简单的布局代码：

<body>

    <div class="content"></div>

    <div class="footer"></div>

</body>

其中content为内容区。方法介绍。
一、为内容区域添加最小高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content {

    min-height: calc(100vh-footer的高度)

}

此方法需要知道footer的高度，如果高度不确定此方法不推荐。content的高度也可以用百分比来表示。

二、flex布局方式
html代码：

body {

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content {

    flex: 1;

}

.footer{

    flex: 0;

}

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

二、负margin布局方式实现
基本构架：
html代码

<div class="wrapper clearfix">

    <div class="content">

      // 这里是页面内容

    </div>

</div>

<div class="footer">

    // 这里是footer的内容

</div>

css代码：

.wrapper {

    min-height: 100%;

}

.wrapper .content{

    padding-bottom: 50px; /* footer区块的高度 */

}

.footer {

    position: relative;

    margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */

    height: 50px;

    clear: both;

}

.clearfix::after {

    display: block;

    content: ".";

    height: 0;

    clear: both;

    visibility: hidden;

}

需要注意的：content元素的padding-bottom与footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

前端经典布局：Sticky footer 布局的更多相关文章

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

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

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

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

  3. 【CSS】Sticky Footer 布局

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

  4. css sticky footer 布局 手机端

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

  5. sticky footer布局，定位底部footer

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

  6. sticky footer布局

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

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

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

  8. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

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

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

随机推荐

  1. 含有对象的List集合实现字母数字混合排序

    List<PageData> varList = [{BOMCode=10A, mantotal=4}, {BOMCode=10B, mantotal=1}, {BOMCode=11A, ...

  2. UltraISO(软碟通) 制作U盘启动盘

    在使用之前我们先下载好UltraISO并安装完成. 打开软碟通,执行文件-->打开命令,找到下载好的ubuntu系统镜像文件 选择写入映象的U盘(U盘容量一定要大于镜像文件的容量),执行启动-- ...

  3. Jmeter之JDBC--Mysql

    一.添加JDBC Connection Configuration控件 界面显示如下: 配置说明: 1.名称:标识 2.注释:备注信息 3.Variable Name:定义的变量名,供后续调用: 4. ...

  4. html php插入百度地图定位

    CSS样式 1 2 3 4 <style> .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hi ...

  5. 《好久不见》（Cover 陈奕迅）箫声远 洞箫

    Your browser does not support the audio element.

  6. 20190905 Lombok常用注解

    Lombok常用注解 val 用于声明类型,将从初始化表达式推断出类型,仅适用于局部变量和foreach循环,而不适用于字段.声明的局部变量为final变量. Java自带类型推断随着JDK版本提升越 ...

  7. Log4Net使用详解（续）

    转:http://blog.csdn.net/zhoufoxcn/article/details/6029021 说明自从上次在2008年在博客上发表过有关log4net的用法介绍文章之后(网址:ht ...

  8. web 前端3 javascript基础

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  9. 第五周课程总结&实验报告

    一.已知字符串:"this is a test of java".按要求执行以下操作:(要求源代码.结果截图.) 统计该字符串中字母s出现的次数. 统计该字符串中子串"i ...

  10. jdk与eclipse安装注意事项

    1.安装这两个软件,一定要注意使得两个软件的版本是一致的: 1.1编写小程序测试jdk的版本号: public class Text{ public static void main(String[] ...