当前位置:  首页  >  前端开发  >  HTML

Stickyfooter布局是什么?-html教程

Stickyfooter布局是什么?我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Stickyfooter布局。图示说明当内容较少时,正常的文档流效果如下图在正常的文档流中,页面内容较少时,页脚部分不是固定

Sticky footer布局是什么?

我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Sticky footer布局。

图示说明

  • 当内容较少时,正常的文档流效果如下图

这样就符合我们的预期效果,可以看出Sticky footer布局的应用场景还是非常广泛的。

实现方式

负margin布局方式

html代码:

// 这里是页面内容

css代码:

.wrapper {min-height: 100%;}.wrapper .content{padding-bottom: 50px; /* footer区块的高度 */}.footer {position: relative;margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;}

注意:content元素的padding-bottomfooter元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式,是兼容性最佳的布局方案,各大浏览器均可完美兼容,适合各种场景,但使用这种方式的前提是必须要知道footer元素的高度,且结构相对较复杂。

flex布局方式

html代码:

这里是主要内容

css代码:

.wrapper {display: flex;flex-direction: column;min-height: 100vh;}.content {flex: 1;}.footer {flex: 0;}

这种布局方式结构简单,代码量少,也是较为推荐的布局方式。

小结

Sticky footer布局是十分常见的一种页面布局形式,实现的方法也比较多,以上两种方法最为常用,且基本可以满足所有应用场景。

以上就是Sticky footer布局是什么?的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有