footer完美到底(二)

继上一篇： 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 &copy; 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 ~

footer完美到底(二)

猜你喜欢