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 条评论
登录 后参与评论

相关文章

来自专栏python读书笔记

python 数据分析基础 day14-matplotlib模块概括条形图直方图折线图散点图箱线图

今天是读《pyhton数据分析基础》的第14天,今天读书笔记的内容为使用matplotlib模块绘制常用的统计图。 模块概括 matplotlib 是最基础的绘...

2354
来自专栏编程

【CSS】格仔背景

CSS代码 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } bod...

21110
来自专栏Linux驱动

28.QT-QPainter介绍

1032
来自专栏知道一点点

【原创】bootstrap框架的学习 第六课[bootstrap代码]

请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: &lt; 和 &gt;。

823
来自专栏移动端周边技术扩展

Vue.js学习笔记(5)

容器默认两个轴 main axis:水平主轴 cross axis:垂直交叉轴

671
来自专栏Android先生

还在用Android正经布局来写页面吗?

ConstraintLayout布局出来已经很久了,刚出来那会儿就想尝试一下的,结果半天都没适应,前两天看到一篇ConstraintLayout实战的文章,看完...

673
来自专栏ytkah

通过html<map>标签给图片加链接

前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接 <img src="/images/hlj....

2885
来自专栏练小习的专栏

浏览器亚像素渲染与小数位的取舍

在响应式项目中,百分比的数值的应用越来越多,比如栅格化布局、背景定位、内边距等。以往对于这种数值,我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长,...

1905
来自专栏前端杂货铺

边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。 首先,我们看看边框的组成结构: ...

3758
来自专栏james大数据架构

RelativeLayout(相对布局)

相对布局的子控件会根据它们所设置的参照控件和参数进行相对布局。 参照控件:aclock   控件与容器之间 android:layout_alignParent...

1908

扫码关注云+社区