css - 紧贴底部的页脚

有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图:

css - 紧贴底部的页脚

有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。

这是我从YII2中找到的简单解决方案

原理是将最外围的容器.warp 设置最小高度为100%,并且使用margin:0 auto -60px 将页脚吸上来。如图:

css - 紧贴底部的页脚

demo:主要看CSS部分

<html> <head> <meta charset="UTF-8"> <title>css - 紧贴底部的页脚</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> </head> <style type="text/css"> .wrap { min-height: 100%; height: auto; margin: 0 auto -60px; padding: 0 0 60px; } .footer {   height: 60px;    background-color: #f5f5f5;   border-top: 1px solid #ddd;   padding-top: 20px; } </style> <body> <div class="wrap"> <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button><a class="navbar-brand" href="#">My Company</a> </div> <div id="w0-collapse" class="collapse navbar-collapse"> <ul id="w1" class="navbar-nav navbar-right nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> </nav> </div> <footer class="footer"> <div class="container"> <p class="pull-left"> © My Company 2017 </p> <p class="pull-right"> Powered by <a href="#" rel="external">Yii Framework</a> </p> </div> </footer> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgffsg.html