css為什麼height:100%不好用

antzone發表於2017-04-02
原文網址 : https://www.softwhy.com/article-5542-1.html
CSS

可能有不少朋友發現這樣一個問題，那就是height:100%有時候會沒有效果。

當然造成沒有效果的原因是多種多樣的，不過最大的一種可能就是對height:100%還沒有明確的認識。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
div {
  width:100px;
  margin:0px auto;
  background:blue;
  height:100%;
}
</style>     
</head>  
<body>
<div></div>
</body> 
</html>

上面的程式碼中，我們設定div的高度為height:100%，但是沒有任何效果，下面介紹一下原因。既然以百分比作為單位，那麼就必須找一個參考物件，這個參考物件自然是父元素的高度尺寸，如果沒有規定父元素的高度尺寸，當然子元素使用百分比作為單位是無效的，所以程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
html, body {
  height:100%;
}
div {
  width:100px;
  margin:0px auto;
  background:blue;
  height:100%;
}
</style>     
</head>  
<body>
<div></div>
</body> 
</html>

上面的程式碼給div的父元素一個高度這樣就可以讓height:100%生效了。

必須給父元素一個明確的高度，子元素的百分比高度才會有效果。

相關文章