height100%

遇到height的問題!竟然忘了,這麼基礎的,差!php

當你設置一個頁面元素的高度(height)爲100%時,指望這樣元素能撐滿整個瀏覽器窗口的高度,但大多數狀況下,這樣的作法沒有任何效果。你知道爲何height:100%不起做用嗎?


按常理,當咱們用CSS的height屬性定義一個元素的高度時,這個元素應該按照設定在瀏覽器的縱向空間裏擴展相應的空間距離。例如,若是一個div元素的CSS是height: 100px;,那它應該在頁面的豎向空間裏佔滿100px的高度。


而跟W3C的規範,百分比的高度在設定時須要根據這個元素的父元素容器的高度。因此,若是你把一個div的高度設定爲height: 50%;,而它的父元素的高度是100px,那麼,這個div的高度應該是50px。


那爲何 height:100%; 不起做用


當設計一個頁面時,你在裏面放置了一個div元素,你但願它佔滿整個窗口高度,最天然的作法,你會給這個div添加height: 100%;的css屬性。然而,若是你要是設置寬度爲width: 100%;,那這個元素的寬度會馬上擴展到窗口的整個橫向寬度。高度也會這樣嗎?


錯。


爲了理解爲何不會,你須要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。若是你不給寬度設定任何缺省值,那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。


可是高度的計算方式徹底不同。事實上,瀏覽器根本就不計算內容的高度,除非內容超出了視窗範圍(致使滾動條出現)。或者你給整個頁面設置一個絕對高度。不然,瀏覽器就會簡單的讓內容往下堆砌,頁面的高度根本就無需考慮。


由於頁面並無缺省的高度值,因此,當你讓一個元素的高度設定爲百分比高度時,沒法根據獲取父元素的高度,也就沒法計算本身的高度。換句話說,父元素的高度只是一個缺省值:height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時,只能獲得undefined的結果。也就是一個null值,瀏覽器不會對這個值有任何的反應。


觀看演示

上面的演示例子是父元素沒有設定固定高度,因而子元素的高度height: 100% 也不會起做用。你能夠根據父元素的背景色來判斷子元素的高度不是100%。


那麼,若是想讓一個元素的百分比高度height: 100%;起做用,你須要給這個元素的全部父元素的高度設定一個有效值。換句話說,你須要這樣作:


  1. <html>
  2.   <body>
  3.     <div style="height: 100%;">
  4.       <p>
  5.         想讓這個div高度爲 100% 。
  6.       </p>
  7.     </div>
  8.   </body>
  9. </html>
複製代碼
如今你給了這個div的高度爲100%,它有兩個父元素<body>和<html>。爲了讓你的div的百分比高度能起做用,你必須設定<body>和<html>的高度。
  1. <html style="height: 100%;">
  2.   <body style="height: 100%;">
  3.     <div style="height: 100%;">
  4.       <p>
  5.         這樣這個div的高度就會100%了
  6.       </p>
  7.     </div>
  8.   </body>
  9. </html>
複製代碼
觀看演示



從這個演示中你能夠看出,height: 100%;起做用了。


在使用height: 100%;時須要注意的一些事項


一、Margins 和 padding 會讓你的頁面出現滾動條,也許這是你不但願的。


二、若是你的元素實際高度大於你設定的百分比高度,那元素的高度會自動擴展。



via:http://www.webhek.com/css-100-percent-height
本站公眾號
   歡迎關注本站公眾號,獲取更多信息