③、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的粘頁腳效果!
warp
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布局
<body>
<nav class="navbar navbar-default navbar-fixed-top">
</nav>
<div class=" container">
</div>
<div class="footer ">
</body>
1
2
3
4
5
6
7
8
9
10
11
與第一種無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,之前做了第一種,目前換為第二種,更加簡潔,推薦。