CSS Sticky Footer 几种完成方法

日期：2021-02-28 类型：科技新闻我要分享

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

甚么是 “Sticky Footer”

所谓 “Sticky Footer”，其实不是甚么新的前端开发定义和技术性，它指的便是1种网页页面实际效果：假如网页页面內容不够够长时，页脚固定不动在访问器对话框的底部；假如內容充足长时，页脚固定不动在网页页面的最底部。但假如网页页面內容不足长，置底的页脚就会维持在访问器对话框底部。

先看来看下面的事例, 编码以下

<div class="header">
    顶部
</div>
<div class="main">
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>

.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
    box-sizing: border-box;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

仔细读者应当发现难题了,底部 footer 部位会伴随着行为主体內容高宽比转变全自动转变,当行为主体內容小于视口的高宽比时, footer 并沒有黏贴在底部. 那末处理这样难题尼?

negative margin

<div class="main">
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>

html,
body {
    height: 100%;
}
.header{
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    position: fixed;
    width: 100%;
}
.main {
    min-height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom: ⑸0px;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

固定不动高宽比处理计划方案

应用以下特性

min-height
calc
vh

calc() 是 CSS3引进的,让你在申明CSS特性值时能够实行1些测算.

它能够用在1些标值场所; 详尽能够查阅这里MDN

vh(Viewport Height): 顾明思议,表明的是视口的高宽比.

详尽信息内容和适配能够查阅这里: caniuse

对于上面的编码开展改动,以下

.main {
    min-height: calc(100vh - 50px - 50px);
}

这样进行大家期待的,可是有个缺陷便是每次大家都要去测算 header、footer 的高宽比.

这明显有缺憾, 倘若DOM构造等级多的话,必须测算的內容更多.

absolute

absolute坚信大伙儿熟习但是了,这里就不在唠叨了; 这里留意这个就行, absolute 元素其部位是依据甚么来开展测算并开展精准定位的?

<div class="header">
    头顶部
</div>
<div class="main">
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
    <p>正中间一部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>

html{
    position: relative;
    min-height: 100%;
}
body{
    margin-bottom: 50px;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
}

.footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

编码是否很简易,这里关键 position的运用：

1 默认设置状况下, 当给某个元素设定为 position:absolute 时, 在先祖元素沒有设定 position: absolute or fixed or relative

时, 其默认设置相对原始包括块( initial containing block ).

2 甚么原始化包括块?

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;

这是w3c对包括块详细介绍, 这段话大约意思, 根元素(document)为默认设置为原始化包括块,其原始化块的尺寸为视口的尺寸.

了解这几个定义后,大家再看来上面的编码就1目了然了!

    html{
        position: relative;
        min-height: 100%;
    }

    body{
        margin-bottom: 50px;
    }

position:relative 更改包括块,让设定absolute元素依据html元向来开展精准定位.
min-height: 确保在內容不够视口时, footer能黏贴在底部.
margin-bottom 值为 footer 元素的高宽比,这样确保內容地区不容易被footer遮挡住.

Flexbox

Flexbox是最完善的计划方案。只必须几行CSS编码便可以完成，并且像上面测算或加上附加的HTML元素。

改动编码以下:

<div class="container">
    <div class="header">
        顶部
    </div>
    <div class="main">
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
        <p>正中间一部分</p>
    </div>
    <div class="footer">
        <i class="fa fa-copyright" aria-hidden="true"></i>
        <div>底部</div>
    </div>
</div>

html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.main {
    overflow: auto;
    box-sizing: border-box;
    flex: 1;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

最后实际效果以下:

negative =margin、固定不动宽度、absolute 都依靠底部高宽比为固定不动.

1般强烈推荐应用 absolute 和 flex 完成方法; 实际用那种能够依据实际情景来应用.

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS 回应式合理布局系统软件的案例编码返回下一篇：没有了