Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS StickyFooter——当内容不足一屏时footer紧贴底部

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

作者头像
IMWeb前端团队
发布于 2019-12-03 09:17:41
发布于 2019-12-03 09:17:41
1.3K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

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

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

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

ie8+

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

html代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    ...
    <div class="footer"></div>
</body>

css代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
</body>

css代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html{
    height: 100%;
}
body{
    min-height: 100%;
    display: flex; /* 设置flex */
    flex-direction: column; /* 方向为垂直方向 */
}
.container{
    flex: 1; /* 内容占满所有剩余空间 */
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-04-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
完美解决footer固定在底部
很多人认为页面页脚部分不就是用footer主义化标签包起来嘛,然而不然;如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况:
javascript艺术
2021/05/28
3.8K0
完美解决footer固定在底部
纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题
前端页面开发或是现在日渐增多的Hybird APP应用开发中,经常遇到模拟原生APP界面效果不佳情况,固定header、footer便是其中一种。
Power
2023/05/28
6990
CSS&HTML面经专题——(三)CSS定位/盒模型/经典布局/浮动布局与BFC
position:static | relative | absolute | fixed | center | page | sticky
玖柒的小窝
2021/10/26
2.1K0
CSS&HTML面经专题——(三)CSS定位/盒模型/经典布局/浮动布局与BFC
如何把控css的方向感
在介绍完问题学习法之后,进入我们今天的主题,接下来我会介绍css的一些底层的知识和比较诡异的现象,借此来让大家对css有更深入的理解。
徐小夕
2019/08/08
1.4K0
如何把控css的方向感
css必知的几个底层知识和技巧
问题学习法:带着问题去学习,有利于集中注意力,目的明确,这既是有意学习的要求,也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的,必要时需经过意志努力,主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息,使学习有了明确的指向性,从而提高学习效率。
.T.
2022/02/20
2.3K0
css精髓:这些布局你都学废了吗?
前言 最近忙里偷闲,给自己加油充电的时候,发现自己脑海中布局这块非常的凌乱混杂,于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来,在这里,分享给大家。 单列布局
马克社区
2022/03/29
1.2K0
css精髓:这些布局你都学废了吗?
我碰到的那些面试题html+css
http://www.sohu.com/a/330231789_120174705
李才哥
2019/09/08
1.3K0
前端面试(1)H5+css
主流浏览器有五大款,分别是 IE、Firefox、Google Chrome、Safari、Opera。 最常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
leader755
2022/03/07
1.4K0
前端面试(1)H5+css
css 如何把元素固定在容器底部?(四种方式)
前几天被人问,「如何把元素固定在容器底部」。(本来想直接把 demo 地址给他,结果没找到,那么今天我们来补一下)
用户6256742
2024/06/28
1.3K0
css 如何把元素固定在容器底部?(四种方式)
面试官:对下面的 CSS 题目回答一遍
在标准模型中,如果你给盒设置 width 和 height,实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小
公众号---人生代码
2021/04/22
1.4K0
盒模型
盒模型的默认行为,当给一个元素设置宽或高的时候,指定的是内容的宽或高,所有内边距、边框、外边距都是追加到该宽度上的。
Cellinlab
2023/05/17
2.1K0
盒模型
CSS布局(二)
添加 padding-bottom后,如上图所示,此时的父元素的高度就是高度最大的子元素的高度,即上面第一个子元素的高度
赤蓝紫
2023/03/11
1.1K0
CSS布局(二)
【CSS】最核心的几个概念
本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。
前端修罗场
2023/10/07
3000
【CSS】最核心的几个概念
css基础教程之尺寸与补白
content-box 默认值,padding和border不被包含在定义的width和height之内,会被padding撑开
老雷PHP全栈开发
2020/07/02
4760
不可忽视的CSS布局
CSS布局是一个前端必备的技能,HTML如果说是结构之美,CSS就是视觉之美可以给用户不一样的体验的效果和视觉冲击。如果一个大方美观的布局,用户第一眼看到会很舒服,不仅提高了用户的视觉效果也提高了用户的体验效果。随着现在设备种类的增多,各种大小不一,奇形怪状的设备使得前端开发的压力不断增大,越来越多的UI框架层出不群,我们就会忽略了最基本的CSS,下面总结了一些经常用到的CSS布局,一起学习和进步。
小丑同学
2020/09/21
6610
前端系列第3集-如何理解css盒子型?
CSS盒子模型是一种设计网页布局的概念,它将每个HTML元素表示为一个盒子,该盒子由内容、内边距、边框和外边距组成,这些部分共同构成了一个完整的盒子模型。
达达前端
2023/10/08
6780
前端系列第3集-如何理解css盒子型?
CSS 面试要点:盒模型
盒模型(Box Model) (opens new window),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)。
Cellinlab
2023/05/17
6460
CSS 面试要点:盒模型
干货:CSS 专业技巧
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:
疯狂的技术宅
2019/03/28
1.8K0
CSS盒子模型
前言 盒子模型(box model)是css中的一个重要概念,它是元素大小的呈现方式 every element in web design is a rectangular box 正文 下面
pitaojin
2018/05/25
1.3K0
界面设计技法之布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了。 回到主题,从最开始的css到如今的sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:"咦?我想让它显示在这个部位,它一点都不听话啊"。很大原因在于我们可能没对css布局这块做一个系统的梳理~,偶然间发现了Learn CSS Layout,在此分享给大家,希望和大家共同提高,另外安利给大家一个如何写出更加优雅的html&&css代码的文章,使劲戳我!
牧云云
2019/02/15
1.4K0
相关推荐
完美解决footer固定在底部
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验