css中sticker-footer布局如何使用

PHP中文网 • 2025年3月10日 23:43:42 • 编程技术 • 阅读 2

这次给大家带来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';   // 减去头部导航栏高度

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！