继上一篇: footer完美至底 后, 本人又发现另一种方法可让footer完美到底!!!
核心代码如下:
index.html代码内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/links.css">
<link rel="stylesheet" href="css/footer.css">
<title>footer完美至底(二)</title>
</head>
<body>
<div class="wrapper">
</div>
<footer class="bs-footer footer">
<div class="container">
<div>
<div id="links" class="clearfix">
<h4>友情链接</h4>
<br>
<a href="http://www.bootcss.com/" target="_blank">Bootstrap中文网</a>
<a href="http://segmentfault.com/" target="_blank">segmentfault</a>
<a href="http://www.csdn.net/" target="_blank">CSDN</a>
<a href="http://bower.io/" target="_blank">bower</a>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome</a>
</div>
<ul class="footer-links muted">
<li>Copyright © 2017 挨踢社区, All Rights Reserved.</li>
</ul>
</div>
</div>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
footer.css代码内容:
@CHARSET "UTF-8";
/*
* Footer
*
* Separated section of content at the bottom of all pages, save the homepage.
*/
.bs-footer {
padding: 30px 0;
color: #777;
text-align: center;
border-top: 1px solid #e5e5e5;
background-color: #f5f5f5;
}
.bs-footer p {
margin-bottom: 0;
color: #777;
}
.footer-links {
margin: 10px 0;
padding-left: 0;
}
.footer-links li {
display: inline;
padding: 0 2px;
}
.footer-links li:first-child {
padding-left: 0;
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media ( min-width : 768px) {
.bs-footer {
text-align: center;
}
.bs-footer p {
margin-bottom: 0;
}
}
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media ( max-width : 767px) {
.bs-footer {
padding: 15px 0;
text-align: center;
}
.bs-footer p {
margin-bottom: 0;
}
}
/* 横向放置的手机及分辨率更小的设备 */
@media ( max-width : 480px) {
.bs-footer {
padding: 8px 0;
text-align: center;
}
.bs-footer p {
margin-bottom: 0;
}
}
links.css代码内容:
@CHARSET "UTF-8";
#links {
max-width: 800px;
margin: 0px auto 20px;
}
#links a {
padding: 6px 16px;
font-size: 16px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
border: 1px solid #d5d6d7;
border-radius: 16px;
background-color: transparent;
margin-right: 10px;
margin-bottom: 10px;
display: inline-block;
outline: none;
font-size: 16px;
text-decoration: none;
}
#links a:hover {
background-color: #E0E1E2;
text-decoration: none;
cursor: pointer;
}
common.js代码内容:
$(window).bind("load resize", function () {
resizeContentHeight();
});
function resizeContentHeight() {
var diff = 0;
if ($(this).width() <= 480) {
diff = 8 * 2; // 因为.bs-footer的padding: 8px 0;
} else if ($(this).width() <= 767) {
diff = 15 * 2; // 因为.bs-footer的padding: 15px 0;
} else { // width >= 768
diff = 30 * 2; // 因为.bs-footer的padding: 30px 0;
}
var footerHeight = $(".footer").height() + 1; // +1是因为.bs-footer的border 垂直方向高度占1px
$(".wrapper").css({minHeight: $(window).height() - footerHeight - diff});
}
页面在浏览器三种不同窗口大小的效果图如下:
宽度>=768px:
宽度>480px && 宽度 <=767px:
宽度<=480px:
OK, Enjoy it ~