html、body元素的高度問題
阿新 • • 發佈：2018-11-02
首先：html元素和body元素均為塊級元素。
簡述：有時我們會發現未設定height: 100%，html、body元素的高度卻為當前視窗的高度，看上去像是設定了height: 100%。
看下面兩個例子：
例1：
<html> <head> <title>demo</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { height: 30%; } </style> </head> <body> <div class="container"></div> </body> </html>
此時的container的高度為視窗高度的30%，html、body元素的高度均為視窗的高度。
例2：
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { height: 30%; } </style> </head> <body> <div class="container"></div> </body> </html>
此時container的高度為0，設定的height: 30%並未生效，html、body元素的高度均為0。
原因：例1未設定當前文件型別，預設啟用相容模式，相容模式下的html、body元素的高度即為視窗的高度，而例2設定了<!DOCTYPE html>，啟用標準模式，而標準模式下的html、body元素的高度均為0。