繼上一篇： 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 ~