CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下:

第一个和第三个为正常不处理的情况,第二个和第三个是我们要实现的情况

以前因为要兼容ie7-,所以对结构比较有要求,实现起来也比较复杂。这里我们先讨论下ie8+的情况,然后在来讨论下更高级的flex实现。

ie8+

实现思路为:设置body最小高度为100%,相对定位,然后空出底部的高度,关键是要设置盒模型box-sizing为border-box或padding-box,最后将footer绝对定位在底部即可。

html代码如下:

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

css代码如下:

html{
    height: 100%;
}
body{
    min-height: 100%; /* 设置最小高度100% */
    position: relative; /* 设置最小高度100% */
    box-sizing: border-box; /* 设置盒模型为border-box,那样这个100%包括了下面的padding-bottom高度 */
    padding-bottom: 120px; /* 高度为footer的高度 */
}
.footer{
    position: absolute; /* 将footer绝对定位在底部 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}

flex

flex实现其实比上面的要求更严格,上面的几乎对结构没要求,而flex则对footer的兄弟元素是有要求的。

主要思路是设置flex的方向为垂直方向,然后设置内容占满其余的空间

html代码如下:

<body>
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
</body>

css代码如下:

html{
    height: 100%;
}
body{
    min-height: 100%;
    display: flex; /* 设置flex */
    flex-direction: column; /* 方向为垂直方向 */
}
.container{
    flex: 1; /* 内容占满所有剩余空间 */
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

6个超实用的AI小工具

? 6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小...

1968
来自专栏全沾开发(huā)

总结CSS3新特性(Transform篇)

总结CSS3新特性(Transform篇) 概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起...

3227
来自专栏一“技”之长

iOS使用xcode可视化图像编辑功能进行图片拉伸

在我的另一篇博客http://my.oschina.net/u/2340880/blog/403996中探讨了IOS拉伸图像(UIImage)的几种方法和一些小...

842
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

2979
来自专栏mySoul

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

833
来自专栏数据结构与算法

2833 奇怪的梦境

题目描述 Description Aiden陷入了一个奇怪的梦境:他被困在一个小房子中,墙上有很多按钮,还有一个屏幕,上面显示了一些信息。屏幕上说,要将所有按钮...

3295
来自专栏数据小魔方

创意滑珠图!

今天要给大家分享的是一种非常有趣的滑珠图! ▽ 本文要讲解的滑珠图做法,稍微有点复杂。不过这种滑珠图在数据对比展示中,效果奇佳。小魔方参考多处教程和资料,终于还...

2544
来自专栏河湾欢儿的专栏

04-修改 维护

想要改变图标的位置? 新功能,加个图标? 画布太大,文件空白太多? 图标多余,要删除?

722
来自专栏极客生活

数据分析Excel技能之求和

鼠标选中 B8单元格 -> 开始 -> 编辑 -> 自动求和,excel会自动感应要求和的行和列。

492
来自专栏数据小魔方

图表中包含负值的双色填充技巧

今天教大家怎么在Excel里制作带负值的双色填充图表 正负值双色填充 ▼ 通常如果数据中带负值 默认的图表输出虽然能够显示负值 但是负值颜色与正值并没有任何区别...

2116

扫码关注云+社区