有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来，如图：
有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。
这是我从YII2中找到的简单解决方案
原理是将最外围的容器.warp 设置最小高度为100%，并且使用margin:0 auto -60px 将页脚吸上来。如图：
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>
demo2: flex解决方案，将上面demo的css换成以下即可。
<style type="text/css">
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.wrap { flex: 1; }
</style>
时间： 2024-10-19 15:26:56