CSS + DIV 讓頁腳始終底部

時間  2019-12-08
標籤 css div 頁腳 始終 底部 欄目 CSS 简体版
原文   原文鏈接

原文地址：http://blog.davidqiu.com/post/2013-06-17/40051753968css

解決方法html

在解決的時候，我查了至關多的資料。若是用純 CSS 的話，彷佛都指向一種叫 Sticky Footer的方法。不過網上的基本都是抄來抄去，只有代碼，沒有解釋什麼的，我就不吐嘈了。瀏覽器

 

原理解析app

這種方法的原理很簡單，用到了 2 個屬性：min-height 和 margin。框架

其中，min-height 都有個很奇特的屬性值：100%。這個屬性值是指當前瀏覽器窗口的高度，實際上就是能顯示的最大高度（一個屏幕的高度）了。那麼天然能夠聯想到，若是將內容部分設成「min-height: 100%」，就可以將內容部分佔有一個屏幕的高度，那麼頁腳起碼會在屏幕的外面。只要稍加改進，便能融入 Header、Content、Footer 這三個部分，並使得 Footer 起碼在屏幕的最底部，並且當內容長度增長時，會在頁面的最後面，而不至於遮擋內容。post

但是要注意的是，「100%」的這個屬性對於「height」或者「min-height」來講有點奇怪，它在使用以前貌似要對「100%」的定義進行初始化。而咱們知道，「html」這個結點是沾滿一個屏幕的，那麼就要先寫這樣的內容：ui

1
2
3
4
body, html
{
  height: 100%;
}

 一個值得關注的是，若是咱們用的是 ASP.NET 框架，由於它是基於 form 的，因此僅僅設置 body 和 html 還不夠，還要設置 form 的相應屬性：spa

1
2
3
4
form
{
  height: 100%;
}

 而爲了頁眉與頁腳緊貼瀏覽器邊框，咱們還要設置相關的 margin 與 padding 爲 0，以防止空隙的出現。而爲了簡單起見，就對全局全部的容器都設置這樣的一個默認值吧。code

1
2
3
4
5
*
{
  margin: 0;
  padding: 0;
}

 好了，到了這裏就能夠放心地去用「min-height: 100%;」了。orm

那麼怎麼解決在內容不多的時候，頁腳可以顯示在瀏覽器的最底部，而不是什麼狀況都被置於一個屏幕的高度以外呢？

可能看到上面的第 2 個我說的要使用的屬性，你們就大概明白了。對，就是用 margin 這個屬性。不過要聲明的一點是，下面的方法用到了一些不太符合規範的方法，就是加多了一個空 div 用做顯示格式定製，而其自己不起任何做用。

先看看網頁的 html 文原本瞭解一下框架吧：

1
2
3
4
5
6
<div class="Wrapper">
  <div class="Header"></div>
  <div class="Content"></div>
  <div class="FooterPush"></div>
</div>
<div class="Footer"></div>

 可見，頁眉與內容都被一個叫「Wrapper」的容器包着，而後在他們後面有個叫「FooterPush」的東西，其實這個就是我以前說的僅用於控制顯示格式的空 div 了。而後，Footer 是置於全部內容以外的。

而後咱們這樣思考：若是 FooterPush 的高度與 Footer 相同，而後 Footer 有一個「margin-top」的屬性，它的值是 Footer 的高度的負值，即例如 Footer 的高度是 120px，而後：

1
2
3
4
5
6
7
8
9
10
.Wrapper .FooterPush
{
  height: 120px;
}
                           
.Footer
{
  margin-top: -120px;
  height: 120px;
}

  那麼發生的狀況將會很是神奇，實際上就是 Footer 恰好就覆蓋在 FooterPush 的上面了。那麼這個時候，咱們只要將 Wrapper 的高度設爲「100%」，這樣全部的東西就至少可以在一個屏幕內現實完畢了。

這樣，就可以達到當內容少時，Footer 最高可以在一個屏幕的最底部顯示；而當內容比較長的時候，Footer 可以很乖巧地在全部內容的後面，而不至於遮擋內容。

OK，大工告成了吧！那我就貼個完整些的代碼吧。

 完整代碼

Html：

1
2
3
4
5
6
7
8
9
10
<body>
<form> <!-- 若是用的是 Asp.Net 就可能會有這個結點 -->
  <div class="Wrapper">
    <div class="Header"></div>
    <div class="Content"></div>
    <div class="FooterPush"></div>
  </div>
  <div class="Footer"></div>
</form>
</body>

 CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*
{
  margin: 0;
  padding: 0;
}
   
html, body, form
{
  height: 100%;
}
   
.Wrapper
{
  min-height: 100%;
}
   
  .Wrapper .FooterPush
  {
    height: 120px; /* Footer 的高度 */
  }
   
.Footer
{
  clear: both; /* 清除浮動元素格式 */
  position: relative;
  margin-top: -120px; /* Footer 高度的負值 */
  height: 120px;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程