Sticky Footer页面效果详细介绍

来源:爱站网时间:2023-01-17编辑:网友分享
技术小编现在给朋友来说一说Sticky Footer页面效果详细介绍,有些朋友想了解清楚的话,那一定不能错过了,接下来时间请让小编带你们一探究竟吧!

绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到

而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位

一、经典套路

这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方

然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底部

HTML:

1

2

3

4

5

6

7

8

<div class="wrap">

  <div class="content">

    <p>填充内容</p>

  </div>

</div>

<div class="footer">

  <p>这是页脚</p>

</div>

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

html,body {

  height: 100%;

}

     

body > .wrap {

  min-height: 100%;

}

     

.content {

  /* padding-bottom 等于 footer 的高度 */

  padding-bottom: 60px;

}

     

.footer {

  width: 100%;

  height: 60px;

  /* margin-top 为 footer 高度的负值 */

  margin-top: -60px;

}

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin, 必须保持一致

这种写法的兼容性非常好,实测 IE7 也能正常展示

但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改

二、Flexbox

不得不说,CSS3 带来了前端的一次变革,其中 Flexbox 更是带来了网页布局的一次变革

虽然兼容性限制了 Flexbox 在国内的推广,但不可否认的是,Flexbox 是前端布局的一大趋势

HTML:

1

2

3

4

5

6

7

<div class="content">

  <p>填充内容</p>

  <hr />

</div>

<div class="footer">

  <p>这是页脚@WiseWrong</p>

</div>

CSS:

1

2

3

4

5

6

7

8

9

html, body {

  display: flex;

  height: 100%;

  flex-direction: column;

}

 

body > .content {

  flex: 1;

}

和经典套路相比,首先是 HTML 部分,内容区域 content 不再需要 wrap 容器

然后 CSS 部分减肥成功,仅仅使用四行代码,就解决了曾经困扰了一代人的难题

而且使用 Flexbox,就不需要限定 footer 的高度,让页面布局更加灵活

当然缺点也是显而易见的,只有 IE10 及以上的浏览器才支持 flex 布局

当你了解完Sticky Footer页面效果详细介绍内容后,对此知识点有没有更进一步的认知,需要获取不同的技术文章内容,可以来本网站翻阅查看,里面的文章都值得你们参考学习。

上一篇:CSS3颜色渐变的实例代码

下一篇:CSS实现火焰效果的实例代码

相关阅读

热门软件源码

最新软件源码下载