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。