两种最常用的Sticky footer布局方式
2024-10-14 18:15:15
Sticky footer布局是什么?
我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Sticky footer布局。
图示说明
- 当内容较少时,正常的文档流效果如下图
在正常的文档流中,页面内容较少时,页脚部分不是固定在视窗底部的,这时就要用到Stickyfooter布局。
- Sticky footer布局效果如下图
这样就符合我们的预期效果,可以看出Sticky footer布局的应用场景还是非常广泛的。
实现方式
负margin布局方式
html代码:
<div class="wrapper clearfix">
<div class="content">
// 这里是页面内容
</div>
</div>
<div class="footer">
// 这里是footer的内容
</div>
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-bottom
、footer
元素的高度以及footer
元素的margin-top
值必须要保持一致。
这种负margin的布局方式,是兼容性最佳的布局方案,各大浏览器均可完美兼容,适合各种场景,但使用这种方式的前提是必须要知道footer
元素的高度,且结构相对较复杂。
flex布局方式
html代码:
<div class="wrapper">
<div class="content">这里是主要内容</div>
<div class="footer">这是页脚区块</div>
</div>
css代码:
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}
这种布局方式结构简单,代码量少,也是较为推荐的布局方式。
小结
Sticky footer布局是十分常见的一种页面布局形式,实现的方法也比较多,以上两种方法最为常用,且基本可以满足所有应用场景。
最新文章
- subline text3 使用总结
- ASP.Net 打通服务器代码和前台界面的特殊符号
- Linux系统安装NoSQL(MongoDB和Redis)步骤及问题解决办法
- 面向服务的架构SOA
- wamp下多域名配置
- python 安装mysql-python模块
- shell 脚本关键字&;符号
- [转]Mac OS X framework 解析
- C# winform窗体假死
- TCP包头
- FPGA使用技巧
- SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型
- 克拉夫斯曼高端定制 刘霞---【YBC中国国际青年创业计划】
- WPF自学笔记
- 如何去掉IE控件的垂直滚动条(使用QAxWidget加载IE控件)
- python初始化MySQL数据库模板
- hdu3480 Division(dp平行四边形优化)
- (转)如何用TensorLayer做目标检测的数据增强
- C# 异步编程4 async与await 异步程序开发
- 完全揭秘log file sync等待事件-转自itpub
热门文章
- yii框架数据库操作数据访问对象(DAO)简单总结
- 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现
- CF #365 703D. Mishka and Interesting sum
- Linux基础网络搭建实验
- bzoj1898 [Zjoi2005]沼泽鳄鱼
- Unity 多屏(分屏)显示,Muti_Display
- 转载 ~shell简介
- linux 内核的另一个自旋锁 - 读写锁
- OA办公系统功能真的越全越好?
- Linux 按时间批量删除文件(删除N天前文件)