對height 100 和inherit的總結

部落格主頁：

正文：

之前看到一篇相關的文章：

在看這個文章的demo時發現一些問題，下面來總結歸納一下:

**如下

效果大致是這個樣子：

其中，左邊的是height 100%，右邊的是height inherit。

下面我們進行一下改動：

其實就是給兩個子元素加上絕對定位。效果如圖：

我們發現，100%的元素的高度計算是相對于父元素的了。這也比較容易理解，因為絕對定位的元素，他的計算規則是相對於他最近的position不為static的元素。就算父元素未定位inherit也是相對於直接父元素進行高度計算的。

我們在outer上加上position relative 試一試：

看來確實是這樣的，現在100%和inherit效果是一樣的.

再對css進行改動：

.outer .in.full .inherit

我們給父元素加上了boxsizing border box，讓父元素的高度計算規則改變，下面看看效果：

我們看到 inherit元素的高度變成了父元素的高度，而100%的元素。

我們再給父元素加上padding：

.outer

效果圖：

可以看到inherit的高度會與父元素的高度相等，而100%的高度會與父元素content相等。

下面我們給子元素加上絕對定位看看：

.outer .in.full .inherit

效果圖：

我們看到，當加上絕對定位時，100%的子元素的高度為：父元素的（content + padding），而inherit的高度就是等於父元素的border-box高度。

下面我們將父元素outer的borde -box 改回去：

.outer

效果圖：

可以看到，inherit的高度變為父元素content-box的高度。

下面看一看固定定位：

可以看到，inherit的高度還是等於父元素盒子模型的高度，而100%的高度變為了視口的高度。

height:inherit的高度，總是等於父元素的盒子模型（content-box、border-box）的高度。

heighe:100%的高度，在文件流中，就等於父元素的content的高度。如果在絕對定位（脫離文件流）中，等於最近已定位父元素的content + padding的高度。在固定定位中，等於視口的高度。

一開始覺得自己很熟悉css的定位、盒子模型，但是現在發現很多東西都是不明白的，這方面的只是還需要深入理解。接下來需要繼續學習css知識，弄明白這些現象背後的原因。