Sticky footer布局是什么?

我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Sticky footer布局。

图示说明

  • 当内容较少时,正常的文档流效果如下图

在正常的文档流中,页面内容较少时,页脚部分不是固定在视窗底部的,这时就要用到Stickyfooter布局。

  • Sticky footer布局效果如下图

这样就符合我们的预期效果,可以看出Sticky 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-bottomfooter元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式,是兼容性最佳的布局方案,各大浏览器均可完美兼容,适合各种场景,但使用这种方式的前提是必须要知道footer元素的高度,且结构相对较复杂。

flex布局方式

html代码:

<div class="wrapper">
<div class="content">这里是主要内容</div>
<div class="footer">这是页脚区块</div>
</div>

css代码:

.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}

这种布局方式结构简单,代码量少,也是较为推荐的布局方式。

小结

Sticky footer布局是十分常见的一种页面布局形式,实现的方法也比较多,以上两种方法最为常用,且基本可以满足所有应用场景。

两种最常用的Sticky footer布局方式的更多相关文章

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

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

  2. css sticky footer 布局 手机端

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

  3. 【CSS】Sticky Footer 布局

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

  4. WPF工作笔记:本地化支持、主进程通知、两种最常用异步编程方式

    1.本地化支持 (1)重写控件默认的依赖属性LanguageProperty FrameworkElement.LanguageProperty.OverrideMetadata( typeof(Fr ...

  5. 前端经典布局:Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  6. Android两种为ViewPager+Fragment添加Tab的方式

    在Android开发中ViewPager的使用是非常广泛的,而它不仅仅能够实现简单的开始引导页,还可以结合Fragment并添加Tab作为选项卡或为显示大批量页面实现强大的顺畅滑动 下面介绍两种为Vi ...

  7. sticky footer布局,定位底部footer

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

  8. sticky footer布局

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

  9. 两种最常用的 HTTP 操作方法是:GET 和 POST。

    什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...

随机推荐

  1. 如何选择合适的PHP开发框架

    PHP作为一门成熟的WEB应用开发语言,已经深受广大开发者的青睐.与此同时,各式各样的PHP开发框架也从出不穷,面对如此多而且良莠不齐的开发框架,开发者们想必都会眼花缭乱,不知道该选择用哪个.其实并没 ...

  2. apache-maven-3.3.9 环境配置

    本地 maven 环境 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前我的新版本是 3.3.9. 1.官网下载 Maven:http:/ ...

  3. 【one day one linux】好用的数据处理工具awk

    awk:好用的数据处理工具 取自<鸟哥私房菜>awk一节 应用:awk是以一行为一次的处理单位,将一行分成数个“字段”进行处理. #awk的命令格式 awk '条件类型1{动作1} 条件类 ...

  4. ELK菜鸟手记 (三) - X-Pack权限控制之给Kibana加上登录控制以及index_not_found_exception问题解决

    0. 背景 我们在使用ELK进行日志记录的时候,通过网址在Kibana中查看我们的应用程序(eg: Java Web)记录的日志, 但是默认是任何客户端都可以访问Kibana的, 这样就会造成很不安全 ...

  5. [ext4]06 磁盘布局 - 特殊inode

    Ext4预留了一些inode做特殊特性使用,见下表: inode Purpose 0 不存在,Ext4中不存在inode 0. 1 存放损坏的数据块链表 2 根目录 3 User quota. 用户q ...

  6. iOS开发 - Swift实现清除缓存功能

    前言: 开发移动应用时,请求网络资源是再常见不过的功能.如果每次都去请求,不但浪费时间,用户体验也会变差,所以移动应用都会做离线缓存处理,其中已图片缓存最为常见. 但是时间长了,离线缓存会占用大量的手 ...

  7. apache用户认证,ssl双向认证配置

    安装环境: OS:contos 6.4 httpd:httpd-2.2.15-59.el6.centos.i686.rpm openssl:openssl-1.0.1e-57.el6.i686.rpm ...

  8. Kafka官方文档

    Apache Kafka是 一个分布式消息发布订阅系统.它最初由LinkedIn公司基于独特的设计实现为一个分布式的提交日志系统( a distributed commit log),,之后成为Apa ...

  9. java中构造方法和this,static关键字

    构造方法: 构造方法是一种特殊的方法,用于创建该类的对象,对对象的数据进行初始化 格式如下: [修饰符] 类名(形参列表){ 方法体 } 特点 A:方法名和类名相同  B:没有返回值类型,连void都 ...

  10. PHP实现类似于MySQ L的group by 效果

    简单版本:只用于获取组数据 其实就是将键值变成键,遍历的时候键相同的会覆盖 $res[$v['country']] [] 可以 = 1,无关紧要