首页 >web前端 >html教程 >CSS-设置Footer始终在页面底部_html/css_WEB-ITnose

CSS-设置Footer始终在页面底部_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:32:471084浏览

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn