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

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/362549

文章标签：

#前端 #ViewUI

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;
}