html,body高度100%的作用

admin發表於2017-12-04
HTML

如果閱讀css程式碼比較仔細，可能會發現大量css檔案頂部會有如下設定:

[CSS] 純文字檢視 複製程式碼
html,body{
  height:100%;
}

下面就介紹一下程式碼的作用是什麼。

在標準模式下，也就是網頁頭部寫DOCTYPE的時候，body不是html頁面的根元素，html才是根元素，如果僅僅設定body的100%，不設定html元素的高度為100%，那麼body的高度不會生效，因為以百分比設定元素的尺寸，必要以父元素的尺寸作為參考，如果父元素沒有設定尺寸，自然不會生效。

程式碼例項:

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

在標準模式下，由於沒有設定html的高度，所以body的高度100%就沒有參考高度，於是導致div的百分比高度無效，將css程式碼中的第一行設定為如下即可:

[CSS] 純文字檢視 複製程式碼
html,body{height:100%}

相關文章