深刻理解CSS系列（二）：爲何height:100%不生效？

時間 2019-11-10

標籤深刻理解 css 系列爲何 height 100% 生效欄目 CSS 简体版

原文原文鏈接

對於height屬性，若是父元素height爲auto，只要子元素在文檔流中（即position不等於fixed或者absolute），其百分比值徹底就被忽略了。這是什麼意思呢？首先來看個例子，好比，某小白想要在頁面插入一個<div>，但願滿屏顯示黑色背景，就寫了以下代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>黑色主題</title>
  <style>
    .box {
      width: 100%; // 這是多餘的
      height: 100%; // 這是無效的
      background: #000;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

而後他發現這個<div>高度永遠是 0，哪怕其父級<body>塞滿了內容也是如此。事實上，他須要加上這樣的設置才行：瀏覽器

html, body {
 height: 100%;
}

而且僅僅設置<body>也是不行的，由於此時的<body>也沒有具體的高度值：佈局

body {
 /* 子元素 height:100%依舊無效 */
}

只要通過必定的實踐，咱們都會發現對於普通文檔流中的元素，百分比高度值要想起做用，其父級必須有一個能夠生效的高度值！可是，怕是不多有人思考過這樣一個問題：爲什麼父級沒有具體高度值的時候，height:100%會無效？code

網上有種觀點認爲，若是父元素height: auto，又要讓子元素height:100%生效的話，會使得佈局進入一種死循環。好比下面的代碼：htm

<style>
  .child1 {
    height: 100px;
  }
  .child2 {
    height: 100%;
  }
</style>
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

他們的推理大概以下：
parent 元素的高度默認爲auto。首先，child1的高度爲100px, 這時候 parent 的高度也會等於100px, 而後由於 child2 的height: 100%，因此它的高度會等於 parent 的高度也變成了100px，這時候 child1 + child2 的高度是200px ,致使 parent 的高度也變成了200px，接着 child2 由於height: 100%，高度也要等於 parent 的高度，因此變成了200px，而後就會陷入無限死循環了。資源

這個推論看上去好像有理有據，可是，其實是個謬論來着。爲何這樣說呢？要明白其中的緣由要先了解瀏覽器渲染的基本原理。首先，先下載文檔內容，加載頭部的樣式資源（若是有的話），而後按照從上而下、自外而內的順序渲染 DOM 內容。套用本例就是，先渲染父元素 parent，後渲染子元素 child1 , 最後渲染子元素 child2 ，是有前後順序的。所以，當渲染到child2的時候，父元素高度已經固定爲 100px 了。高度不夠怎麼辦？溢出就行了，overflow 屬性就是爲此而生的。文檔

記住，瀏覽器渲染規則是：靜態渲染，一次到位。it

真實的緣由是：若是包含塊（即父元素）的高度沒有顯式指定（即高度由內容決定），而且該元素不是絕對定位，則計算值爲auto（這是計算值，是指渲染以後解釋的值，並非咱們設置height: auto所指的值）。一句話總結就是：由於解釋成了 auto。要知道，auto 和百分比計算，確定是算不了的：io

'auto' * 100/100 = NaN

此時，他們的計算結果是NaN,這就是父元素沒有設置高度時，子元素高度百分比不生效的緣由了。class

那有什麼辦法讓高度百分數生效呢？有兩種辦法。
（1）設定顯式的高度值。例如，設置height:600px，或者能夠生效的百分比值高度。例如，咱們比較常見的：

html, body {
 height: 100%;
}

(2)使用絕對定位
爲何使用絕對定位就能夠了呢？由於會使元素具備「格式化高度」。那什麼又是格式化高度？

格式化寬度/高度僅出如今「絕對定位模型」中，也就是出如今position屬性值爲 absolute 或 fixed的元素中。當left/top或top/bottom對立方位的屬性值同時存在的時候，元素的寬度/高度表現爲「格式化寬度/高度」，其寬度/高度相對於最近的具備定位特性（position屬性值不是static）的祖先元素計算。

回到開頭提到的盒子，小白設置height不生效的問題，若是用絕對定位方法實現，能夠設置他的父元素body爲絕對定位，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>黑色主題</title>
  <style>
    body {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .box {
      width: 100%;
      height: 100%;
      background: #000;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

相關標籤/搜索

每日一句

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