天天看點
傳回

Bootstrap 粘頁腳，你必須得學會的簡單技能

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/50987126

Bootstrap 粘頁腳（你必須得學會的簡單技能），說得具體一點就是“将固定高度的頁腳緊貼頁面底部”。說完這句話，王二我有點誠惶誠恐，其實這句話出自

bootstrap入門介紹 ，不過呢，請原諒我的粗魯（靈感非原創），畢竟項目的實際情況和模闆有所差別，是以參照模闆，也不能確定快速的完成“粘頁腳”的效果，那麼還是聽我來唠叨一下吧！

一、頁面效果

頁面非常簡單，注意亮線為火狐邊緣，可以很清楚的看到，頁腳灰色部分沉浸在頁面底部。

二、執行個體講解（無navbar-fixed-top）

①、代碼 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/css">
html,body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -200px;
}

 #push
   height: 200px;
 }
 .footer {
    border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
}

    </style>
<title>釋出項目</title>
</head>
<body>
    <div id="wrap">
        <nav class="navbar navbar-default navbar-fixed">
        </nav>
        <div class=" container project_choose">
            <div class="row">
                <div class="col-md-5 project_general">
                    <span class="f14">我有一個夢想，有創意項目，有創意産品，點選釋出回報</span>
                    <div class="blank20"></div>
                    <div>
                        <a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即釋出産品</a>
                    </div>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-5 project_agency">
                    <span class="f14">我有創業夢想，有融資需求，點選釋出股權</span>
                    <div class="blank20"></div>
                    <div>
                        <button type="button" class="btn btn-primary">立即發股權</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>





<div class="footer ">
    <div class="container">
        <div class="row footer-top">
            <div class="col-sm-6 col-lg-6">
                <h4></h4>
                <p>歡迎你加入，這裡有你想要的.</p>
            </div>
            <div class="col-sm-6  col-lg-5 col-lg-offset-1">
                <div class="row about">
                    <div class="col-xs-3">
                        <h4>關于</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a href="">關于我們</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-3">
                        <h4>聯系方式</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a target="_blank" title="雲夢網官方微網誌" href="">新浪微網誌</a>
                            </li>
                            <li>
                                <a href="">電子郵件</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <hr>
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li>Copyright &copy;2016. n 洛陽限公司 Software All Rights Reserved.</li>
            </ul>
        </div>
    </div>
</div>
</body>

</html>

②、頁面body布局 

<body>
    <div id="wrap">
        <nav class="navbar navbar-default navbar-fixed">
        </nav>
        <div class=" container">

        </div>
        <div id="push"></div>
    </div>

    <div class="footer ">

    </div>
</body>
  • body中第一級元素，兩個div，分别為wrap和footer
  • 第二級元素中，一個nav，兩個div，分别為container和push（如果你忘記了push這個div，ok，你的頁面在縮放時會錯亂的）

以上列出的元素自然粘頁腳必不可少的。

③、css分析 

html,body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -200px;
}

 #push
   height: 200px;
 }
 .footer {
    border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
}
  • html,body的高度必須是100%，也就是充滿浏覽器視窗高度
  • #wrap div的min-height必須是100%，height呢，就自動适應。
    • 關鍵點在于margin，top的外邊距為0，而bottom的外邊距則為-200px。
    • 注意，就是-200px，理論上是footer高度（你可以通過firebug調試最佳高度）的負數，這一點也很關鍵！為什麼要為負數呢？因為warp的高度本來就是100%，為負數的話，就可以為footer留出顯示完整的高度，否則footer将出現在頁面滾動條下部。
  • #push元素，頁面完整顯示的時候，似乎看不出來push元素的作用，但當你頁面縮放時，如果沒有push，footer元素就會和container中的元素重合，之前圖上也有說明，那麼其具體作用如何呢？通過firebug我們選中push的div，可以看到其正好包含着footer元素内容，如此将會阻止footer和container元素重合。

如此，以上關鍵點就介紹完了，你隻要注意以下元素的分布，就可以輕松搞定bootstrap的粘頁腳效果！

  1. warp
  2. push

三、執行個體講解（有navbar-fixed-top）

①、核心代碼 

<head>
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/css">
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 200px;
}
 .footer {
        border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}

    </style>
<title>釋出項目</title>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
    </nav>
    <div class=" container project_choose">
        <div class="row">

        </div>
    </div>
</div>

<div class="footer ">
    <div class="container">

    </div>
</div>
</body>

</html>           

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
    </nav>
    <div class=" container">

    </div>

    <div class="footer ">

    </div>
</body>

與第一種無navbar-fixed-top差別在于：

  • body中不再嵌入wrap，并列元素分别為nav（導航），container，footer
  • 并且去掉push的div 

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 200px;
}
 .footer {
        border-top: 1px solid #e5e5e5;
    color: #777;
    padding: 19px 0;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}
  • html的最小高度為100%，而不再是wrap 。
  • html的位置為relative（相對），而footer的位置為absolute（絕對），非常關鍵。
  • body的margin-bottom為footer的高度200px。

ok，之前做了第一種，目前換為第二種，更加簡潔，推薦。

感謝您閱讀【 沉默王二的部落格

】，如果王二的部落格給您帶來一絲幫助或感動，我（也就是王二）将不甚榮幸。

如果您碰巧喜歡，可以留言或者 加qq群120926808，這将是我鼓搗更多優秀文章的最強動力。

前端開發 容器 開發容器 bootstrap滾動條 bootstrap進度條 bootstrap導覽列 bootstrap調用quot
上一篇: 高性能web建站規則（盡量減少http請求）
下一篇: 【剖析 | SOFARPC 架構】之總體設計與擴充機制前言RPC是什麼通用 RPC 架構原理SOFARPC架構設計總結

繼續閱讀