height:inherit和height:100%的區別簡單介紹

antzone發表於2017-04-02

本章節介紹一下height兩個屬性值的區別，希望能夠給需要的朋友帶來一定的幫助。

inherit表示繼承父元素的高度。

100%表示父元素的高度x100%。

貌似兩個屬性值的作用是完全一樣的。

（1）.當父元素的高度為百分比或者固定值的時候，子元素的100%或者inherit表現是一直的。

（2）.當父元素的高度是auto的時候，子元素的100%和inherit的表現都是auto。

當然要說明一點，兩者在瀏覽器相容性上是存在差異的:

（1）.height:100%被所有的主流瀏覽器支援。

（2）.height:inherit被IE8和IE8以上瀏覽器支援，當然包括其他標準瀏覽器。

但是它們確實是有區別的，看下一面一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
.percent,.inherit{
  display:inline-block;
  height:200px; 
  width:40%;
  background:#ccc;
}
.percent div{
  position:absolute;
  height:100%; 
  width:200px;
  background-color:green;
}
.inherit div{
  position:absolute;
  height:inherit; 
  width:200px;
  background-color:green;
}
</style>
</head>
<body>
<div class="percent"><div></div></div>
<div class="inherit"><div></div></div>
</body>
</html>

上面的程式碼你可以看到區別了。

如果定位元素的高度是百分比的話，那麼它的參考物件就是父元素中最近的定位元素，如果父元素中沒有定位元素，那麼它的參考可以認為是視窗的高度尺寸，也就是瀏覽器客戶區的尺寸，絕對不是body的尺寸，這個大家要注意了。

相關文章