认识Sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

原创最新推荐文章于 2023-02-13 20:45:00 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Stickyfooter布局的概念及实现方式。该布局确保在内容不足时footer保持在页面底部，而当内容超出时，footer则显示在内容下方。通过调整包裹内容区盒子的高度及其底部填充与footer顶部外边距的相互作用来实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sticky footer布局

1.简单理解就是：没内容时，它在底部，有内容时它始终显示在内容的底部，不会被内容覆盖掉，相当于footer部分就固定在了底部。
2.该布局的设置方式：
》包裹内容区的盒子以及内容区的高度均为100%;
》与此同时为内容区设置一个padding-bottom:100px;
设置的这个值就是给底部区域留的
》那么底部区域设置margin-top:-100px.就可以了。
例如：

//html部分：
<body>
    <div class="wrap">
        <div class="content">       
            Hello world
        </div>
    </div>
    <div class="footer">
        I' the footer
    </div>

</body>
//css部分：
<style>
    html,body{
        padding:0;
        margin:0;
        width:100%;
        height:100%;
    }
         .wrap{
            width:500px;
            min-height:100%;
            background:lightgreen;   
         }
         .content{
            padding-bottom:150px;
            word-break:break-all;
         }
         .footer{
            width:500px;
            height:150px;
            margin-top:-150px;
            background:pink;
         }
    </style>