1. 程式人生 > >DIV巢狀時外層無法自適應高度三種解決方案

DIV巢狀時外層無法自適應高度三種解決方案

http://developer.51cto.com/art/201009/225428.htm

這裡向大家描述一下解決DIV巢狀時外層(父層)無法自適應高度的方法,原本自己寫的CSS程式碼是沒有錯誤的,但是為什麼在新版的瀏覽器中會發現使用DIV巢狀時外層(父層)無法自適應高度的錯誤,這裡看一下解決方案。

如何解決DIV巢狀時外層(父層)無法自適應高度?

相信很多朋友在使用CSS+DIV過程中都會遇到這個問題,特別是目前的瀏覽器版本越來越多,更新的也非常快,對CSS的支援和要求越來越高,如IE8、IE9、FF、chrome等等瀏覽器,雖然對CSS支援完美,但是也有些錯誤,導致DIV+CSS的排版出現驗證問題。

原本自己寫的CSS程式碼是沒有錯誤的,但是為什麼在新版的瀏覽器中會發現使用DIV巢狀時外層(父層)無法自適應高度的錯誤,完美所寫的程式碼在IE6上能完美的展示出來,但是在IE8、FF上卻出現不適應高度的問題,難道是CSS不相容瀏覽器?下面就來說說其解決方法。

假如完美的CSS程式碼已經通過了W3C的驗證,那就說明,我們寫的程式碼完全是沒有錯誤的,那麼是說明原因呢?這個原因我也說不清楚,在網上查了好久,我也沒有查到原因,但是查到了相關的解決辦法,網上的解決辦法有3種,但是我覺得不完美,下面列出網上的我查詢到的解決方法。

1、在外層的CSS程式碼中加入display:table

2、第二種解決方法是定義一個CSS類:

  1. .box:after{  
  2. content:".";  
  3. display:block;  
  4. height:0px;  
  5. clear:both;  
  6. visibility:hidden;  
  7. }  

然後將父層DIV程式碼中的<divid="main">改為<divid="main"class="box">。

3、在外層(父層)CSS程式碼中加入overflow:auto;

在我使用了上面3種方法後,我覺得只有第3種方法有效,但是其效果不是很好,但是不會出現異常,不過為了更完美的解決這個問題,我介紹一個很有效的方法給大家試試,這個方法絕對有效,而且也是很簡單的。

最終解決方法:根據上面的3個方法,最終我的解決方法是,在外層(父層)CSS程式碼中加入下面兩個屬性值(一個都不能少)。 

  1. clear:both;overflow:auto;