1. height:100%和height:inherit的異同

1.1 兼容性差異

height:100% IE6+ √

height:inherit IE8+ √

1.2 大多數情況作用是一樣的

除去兼容性，大多數情況下，兩者作用是一樣的，甚至都很難想出不一樣的理由

父容器height: auto，無論height:100%或者height:inherit表現都是auto

父容器定高height: 100px，無論height:100%或者height:inherit表現都是100px高

2. 絕對定位大不同

當子元素為絕對定位元素，同時，父容器的position值為static的時候，呵呵呵，height:100%和height:inherit的差異就可以明顯體現出來了！

結果

height:100%的沖破云霄，哦，不對，是深入地域地獄；而height:inherit卻完美高度自適應沒有定位特性的父級元素

總結：

總之，這里，height:inherit的強大好用可見一斑。回頭，容器高度變化了，里面的絕對定位元素依然高度自適應。這是很贊的特性，因為如果頁面很復雜，避免使用position: relative會讓你少去很多z-index混亂層級覆蓋的麻煩

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS中height:100%和height:inherit的异同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。