浅谈css sticker-footer 布局

2024-07-11 09:07:56

字体：大中小

来源：转载

供稿：网友

在网页设计中，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%;        /*height: 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>

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

注：相关教程知识阅读请移步到CSS教程频道。

上一篇：CSS3 mask 遮罩的具体使用方法

下一篇：CSS实现全屏切换效果的示例代码