html、body元素的高度問題

時間 2020-07-17

標籤 html body 元素高度問題欄目 HTML 简体版

原文原文鏈接

最近看別人的代碼，總有html,body{height:100%}這行代碼，不知道爲何，特此記錄一下。css

<!DOCTYPE html>
<html lang="en"> <head> <title>test</title> <style> * { margin: 0; padding: 0; } .box { height: 50%; background-color: #ccc; } </style> </head> <body> <div class="box"></div> </body> </html>
複製代碼

按理說.box的高度應該是瀏覽器的50%，可是事實並不是如此，html body div 的高度都爲0。html

這裏說一下<！DOCTYPE html>，啓用標準模式，標準模式下的html、body元素的高度均爲0。咱們都知道,一個塊級元素沒有主動爲其分配高度和寬度的時候,瀏覽器會默認爲其分配最大寬度,可是不負責高度的分配,沒有設置高度時,高度是由子元素堆砌起來的,那麼html和body的高度也是由子元素堆砌起來的。另外,元素高度設置爲百分比須要向上遍歷父元素找到一個定值高度才能起做用,若是中途有個height爲auto或者沒有設置高度,那麼設置百分比高度就不起做用了瀏覽器

div的父元素是body，body的父元素是html，經過height:100%層層向上，找到頂級獲取定高。 html的百分比是相對於瀏覽器而言，其餘是相對於其父元素而言

/* 設置html的height:100%，就能夠獲取瀏覽器的定高 */
html,body{
  height: 100%;
}
複製代碼

未設置<！DOCTYPE html>，默認啓用怪異模式，怪異模式下，瀏覽器按照本身的方式解析渲染頁面，在不一樣的瀏覽器就會顯示不一樣的樣式,html、body元素的高度即爲窗口的高度. 寫html網頁時候上來就把html,body{height:100%}寫上去。這樣後面的div就能夠用百分比起做用了。spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。