CSS-设置Footer始终在页面底部

最新推荐文章于 2025-09-05 17:06:50 发布

weixin_33802505

最新推荐文章于 2025-09-05 17:06:50 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/xiaofeixiang/p/4999141.html

本文介绍了一个在前端开发中常见的问题：当网页内容长度变化时，footer的位置也随之变化，影响了网页的美观。作者通过使用负边距的方法，成功解决了这一问题，并提供了解决方案的代码示例。

Footer顾名思义页脚，如果内容多的时候在底部时感官很好，但是当内容变少（无法撑开一屏的时候）footer不固定在底部，影响美观，对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了，由于本人前端水平有限，耗费一点时间最后通过负边距实现了这个简单的功能，代码如下:

    <div class="wrapper">
        <p>博客地址:http://www.cnblogs.com/xiaofeixiang/</p>
        <div class="replace"></div>
    </div>
    <div class="footer">
       博客园-FlyElephant
    </div>

设置CSS:

    * {
        margin: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    .wrapper {
        min-height: 100%;
        height: 100%;
        margin: 0 auto -202px;//通过负边距隐藏replace
    }
    
    .footer,
    .replace {
        height:200px;//设置高度一致
    }
    
    .footer {
        border: 1px solid #6AC5AC;
    }

　无论页面内容长短可以满足开发需求~

转载于:https://www.cnblogs.com/xiaofeixiang/p/4999141.html