浅谈css sticker-footer 布局

时间：2021-05-08

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？

1、嵌套层级不深，可直接继承自 body width：100%； height:100%;

// html<body> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div></body>// 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

<body> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </div> </body> .wrapper{ position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了 overflow:auto; // 当高度超过 100% ;时产生滚动条 width:100%; height:100%; // 继承自 body } // wrapper 内部包裹的结构，就如上所示了，css样式也一样

3. 当无法用百分比获取高度时，也可通过js方式获得

//css样式同第一种， 只是 sticker 的 min-height 用css获取 <body> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </body> 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以外的剩余空间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>sticker footer</title></head><style> 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%; } #sticker{ background-color: red; flex: 1; } #sticker .sticker-con{ padding-bottom: 40px; } .footer{ background-color: green; height: 40px; }</style> <body> <header>我是头部</header> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是内容</div> </div> <div class="footer">我是脚</div> </div> </body><script> var wrapper = document.querySelector('#wrapper'); var h = document.body.clientHeight; wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章