这次给大家带来css中sticker-footer布局如何使用，使用css中sticker-footer布局的注意事项有哪些，下面就是实战案例，一起来看一下。
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？
1、嵌套层级不深，可直接继承自 body width：100%； height:100%;
// html
我是内容
// csshtml,body{ width:100%; height:100%;}#sticker{ width:100%; min-height:100%;}.sticker-con{ padding-bottom:40px; // 40px 为 footer 本身高度}.footer{ margin-top:-40px; // 40px 为 footer 本身高度}
2、嵌套层级很深，无法直接从上级继承 百分比高度的
第一种方法：给需要的 sticker-footer 创建一个 wrapper
我是内容
.wrapper{ position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了 overflow:auto; // 当高度超过 100% ;时产生滚动条 width:100%; height:100%; // 继承自 body } // wrapper 内部包裹的结构，就如上所示了，css样式也一样
3. 当无法用百分比获取高度时，也可通过js方式获得
//css样式同第一种， 只是 sticker 的 min-height 用css获取
我是内容
var sticker = document.querySelector('#sticker'); var h = document.body.clientHeight; sticker.style.minHeight = h - 44 + 'px'; //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:
4. 强大的 flex 布局 flex-direction:column
将wrapper容器 display:flex; flex-direction:column
sticker: flex:1; 占据除footer以外的剩余空间
sticker footer html,body{ width: 100%; height: 100%; background-color: #ccc; margin:0; padding: 0; } header{ height:44px; width: 100%; text-align: center; line-height: 44px; } #wrapper{ display: flex; flex-direction: column; width: 100%; /*height: 100%;*/ } #sticker{ background-color: red; flex: 1; } #sticker .sticker-con{ padding-bottom: 40px; } .footer{ background-color: green; height: 40px; }我是头部
我是内容
var wrapper = document.querySelector('#wrapper'); var h = document.body.clientHeight; wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
纯css实现照片墙3D效果
Css绘制扇形图案
以上就是css中sticker-footer布局如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609322.html
微信扫一扫 
支付宝扫一扫 
