為什麼設定css使用百分比設定元素高度無效

antzone發表於2017-03-07
CSS

設定一個元素的高度非常的簡單，程式碼如下:

[CSS] 純文字檢視 複製程式碼
#box{
  width:200px;
  height:100px;
}

除了以上方式我們還可以採用百分比作為尺寸值，但是有時候使用此方式設定元素的高度並沒有效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
#box{
  width:300px;
  height:200px;
  background:red;
}
#inner{
  width:50%;
  height:50%;
  background:blue;
}
</style> 
</head> 
<body> 
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body> 
</html>

以上程式碼中雖然設定了內部div的高度和寬度，但是並沒有效果，這是因為既然你採用百分比作為尺寸，那麼就要有一個參考物件，這個參考物件就是它的父元素，但是父元素沒有設定尺寸，於是就沒有效果了，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
#box{
  width:300px;
  height:200px;
  background:red;
}
#middle{
  width:200px;
  height:100px;
  background:green;
}
#inner{
  width:50%;
  height:50%;
  background:blue;
}
</style> 
</head> 
<body> 
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body> 
</html>

上面的程式碼已經能夠實現我們的目標了，如果想以網頁高度為參考，那麼需要這麼寫，程式碼如下:

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

上面的程式碼中，需要設定html和body的高度，否則也會無效。

相關文章