Maison  >  Article  >  interface Web  >  CSS-设置Footer始终在页面底部_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-24 11:32:471061parcourir

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

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn