css之子元素獲取(未定義高度)父元素的高度

你可能碰到過這樣的需求，一個高度不固定的區域（內容由用戶創造），當鼠標經過該區域或者其神馬操作時，需要出現一個與該區域一樣大的模版；

我們用一個span來處理這個mask。由於 .sample-1 和 .sample-2 的高度是不確定的，也就是說我們沒有對它們定義 height。如果父元素沒有定義高度，子元素仍然可以通過 height:100% 的方式來得到父元素的實際高度。

除了IE6，幾乎所有的主流瀏覽器都支持子元素獲取父元素（未定義高度）的高度；

對於這個用戶創造內容的區域，高度會在一個什么范圍內，我想你是會有一個預期的，你可以定義一個適當的padding值，如果實在無法預期，那你不妨將這個值定義大一點；這里將padding-bottom定義為500px；用_overflow:hidden;來防止mask溢出父層；

 

html代碼：

<div id="demo"> <div class="sample-1"><p>我的高度其實是沒有定義的，內容有多少我就有多高。</p><span class="mask"></span></div>
<div class="sample-2"><p>我的高度其實是沒有定義的，內容有多少我就有多高。我的高度其實是沒有定義的，內容有多少我就有多高。</p><span class="mask"></span></div> </div>

 

CSS代碼：

#demo div{ position:relative; 
　　　　　　 _overflow:hidden; 
　　　　　　 width:300px; 
} 
#demo span{ position:absolute; 
　　　　　　　top:0; 
　　　　　　　left:0;
　　　　　　　width:100%; 
　　　　　　　height:100%; 
　　　　　　　_padding-bottom:500px; 
}