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

	composer @Ta
	2020-03-05 18:41

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

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

实现思路为：设置body最小高度为100%，相对定位，然后空出底部的高度，关键是要设置盒模型box-sizing为border-box或padding-box，最后将footer绝对定位在底部即可。
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; /* 内容占满所有剩余空间 */
}

原文：

IMWeb社区

https://imweb.io/topic/553702bbc3f0adea50cd67dc

最后编辑:2020-03-05 18:46

阅:1891

发表于2020-03-05 18:41

#其他教程

评论:

返回源来页/返回首页

天合之作曲在人意

心灵鸡汤：