什么是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. unity项目中使用BUGLY遇到的的几个问题

    1,第一次对外测试中,发现某些机型游戏中卡死了,但bugly上没报错.后来发现是我们的代码使用 try catch把异常捕获了但什么都没做. 2,别人家项目的bugly上报都能显示出文件和代码行,我们 ...

  2. object数据类型

    1 object数据类型是dataframe中特殊的数据类型,当某一列出现数字.字符串.特殊字符和时间格式两种及以上时,就会出现object类型,即便把不同类型的拆分开,仍然是object类型. 如下 ...

  3. XML读写工具类

    摘要:①读取XML文件,生成pojo对象:②将对象信息保存到xml中. 步骤: ①新建一个普通的java类BasePage: package com.test.selenium.pages; impo ...

  4. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  5. Openssl ASN.1 说明一 分享

    [引言]ASN.1全称为Abstract Syntax NotationOne,是一种描述数字对象的方法和标准.openssl的编码方法就是基于该标准的,目前,很多其他软件的编码方法也是基于该标准.对 ...

  6. C#扩展方法 DataTable.ToEntitys

    类A需要添加功能,我们想到的就是在类A中添加公共方法,这个显而易见肯定可以,但是由于某种原因,你不能修改类A本身的代码,但是确实又需要增加功能到类A中去,怎么办? 这个时候扩展方法(Extension ...

  7. Oracle 修改语言环境

    Oracle数据库还是用英文的比较好,毕竟是外国人开发的.而且许多提示都是模板化 的,所以不懂英文,也不要怕,多Google就会了. 唉,安装Oracle 数据库时,手贱语言选择了中文和英语.结果使用 ...

  8. log记录日志使用说明

    一. 想要让Log4net日志(以下称日志)按每月自动归类为一个文件夹,为此,学习和修改了log4net.config文件.查了资料,重点是以下这些参数: <param name="F ...

  9. 使用gitlab的webhook进行前端自动部署

    gitlab有个功能叫webhook,比较适合前端代码的自动部署.其中的逻辑在  http://172.30.83.152:30080/help/user/project/integrations/w ...

  10. [Python3 填坑] 018 组装类的几个例子

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 MetaClass 举例 2.2 type 举例 2.3 MetaClass 举例 1. print( 坑的信息 ) 挖坑时间:2019 ...