height:100%与height：inherit的区别
Posted zifieyu666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了height:100%与height：inherit的区别相关的知识，希望对你有一定的参考价值。
一、兼容性
首先，inherit这个属性只是在ie8+才支持；100%支持ie6；
二、大多数情况下没有区别
在正常情况下height：100%与height：inherit没有任何区别；
1.父元素：height：auto；height：100%与inherit也都是auto；
2.父元素定高：height：100px; height:100%与inherit也都是100px；
三、绝对定位情况下大不同
如果子元素为绝对定位元素，则height：100%；参考的父级是离它最近的有定位属性的父级而非直接父级；
但是此时height：inherit；参考的依旧是直接父级，无论直接父级是否有定位属性；
参考demo；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ width: 300px; height: 300px; border:5px solid red; } .box{ width: 200px; height: 200px; border:5px solid yellow; } .child{ width: 100px; height: 100px; border:5px solid blue; } .margin{ top:50px; left:50px; } .abs{ position:absolute; } .rel{ position: relative; } </style> </head> <body> <div class="wrap"> <div class="box"> <div class="child abs"></div> </div> </div> </body> </html>
以上是关于height:100%与height：inherit的区别的主要内容，如果未能解决你的问题，请参考以下文章