什么是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. 大数据笔记（三）——Hadoop2.0的安装与配置

    一.Hadoop安装部署的预备条件 准备:1.安装Linux和JDK. 安装JDK 解压:tar -zxvf jdk-8u144-linux-x64.tar.gz -C ~/training/ 设置环 ...

  2. HTML canvas中translate()与rotate()的理解

    首先,当我们在页面上初始化canvas时,相当于在上面放了一块画布,这块画布我们可以理解为上面有一个坐标系(如下图),左上角是原点,往右是X轴的正方向,往下是Y轴的正方向,我们在画布上绘制的内容都是基 ...

  3. fengmiantu2

  4. Wowza 4.5 修改 manager 端口号

    //编辑下面的文件, 搜索8088 有两处,改为想要的端口号即可 vim /usr/local/WowzaStreamingEngine/manager/bin/startmgr.sh // 重启服务 ...

  5. UI自动化之js\jquery的应用

    js\jquery的应用,有很多难以定位到的,可以通过js或者jquery来处理 目录 1.js 2.jquery 1.js 1.1js有5种定位,最后execute_script(js)来执行js ...

  6. iview在项目中遇到的坑

    1.下拉框选中某一项搜索发现总是搜不到,最后发现是选中后选中值后边莫名多了很长的空格,原因很简单,在代码中opction闭合标签和主体没有在一行. 2.iview+vue项目中,用百分比或者displ ...

  7. Selenium WebDriver 数据驱动测试框架

    Selenium WebDriver 数据驱动测试框架,以QQ邮箱添加联系人为示例,测试框架结构如下图,详细内容请阅读吴晓华编著<Selenium WebDiver 实战宝典>: Obje ...

  8. Mac 设置git命令tab自动补全（亲测有效）

    转载 :https://blog.csdn.net/tiancaijyy/article/details/84888868 注意: 获取git-completion.bash  要对应自己的git版本 ...

  9. debian下使用shell脚本时出现了 declare:not found 解决方法

    问题:出现declare:not found的提示 解决:原来,UBUNTU用的是dash(后来证明这个其实这个不是错误的原因:从#!/bin/bash到#!/bin/dash,依旧无法运行,在这写出 ...

  10. [Python3] 006 列表的常用方法

    目录 一个篱笆三个桩,list 有--好多个桩 1. 列表的小伙伴们 (1) 召唤小伙伴 (2) 我给"他们"分了个组 2. 小伙伴们的"才艺展示" (1) & ...