為什么100％高度不是瀏覽器高度的100％？

Question

編輯： 從服務器中刪除文件

http://www.jdxsolutions.com/newsite/index.html
http://www.jdxsolutions.com/newsite/default.css

這是我用來嘗試一些東西的布局。 令我難過的是，當瀏覽器調整大小以顯示垂直滾動條時，背景未達到瀏覽器窗口的整個高度...實際上它們比內容面板短，盡管設置為高度：100％。

這種情況發生在IE8，FF3和Chrome中，因此它顯然是一個非常符合標准的搞砸（通過驗證XHTML 1.0 strict和CSS2.1 +）！ 誰能指出明顯的錯誤？

編輯：我按照建議在Firebug中查看了它。 我找到的是頁面div超出父頁面底部div。 這怎么可行？

Answer 1

簡短的回答：這很復雜。 要真正理解影響CSS 100％高度（和寬度）的所有因素，您需要了解以下術語：視口，初始包含塊，流，溢出，內聯格式化上下文，塊格式化上下文，W3C框模型，IE盒模型和Quirks模式。

如果你真的有興趣了解它，那么沒有比規范更好的起點： 視覺格式模型

但這是一個概述。

內聯元素的高度與塊元素的計算方式不同 - 因此從這里開始，這僅指塊元素或已賦予新塊格式化上下文的元素。

首先給出一個100％高度的元素，它將從它的包含塊中取出它的高度，例如。 它是父級，它的父級從它的父級獲取它的高度，然后返回到初始包含塊。

初始包含塊在HTML（主體）和XML / XHTML（html）中是不同的，它的默認高度不是視口的100％，所以通常你會覆蓋你的屁股並以這種方式定義它：

html, body {
   margin:0;
   padding:0;
   height:100%;
}

我們必須將邊距和填充歸零，因為在CSS中，Height屬性指的是Content Box的高度，如果有任何邊距或填充（或邊框），我們會得到一個滾動條。 高度為100％+填充+邊框+邊距... W3C Box模型

例外情況是，如果IE處於Quirks模式 ... IE框模型

...所以除非你通過所有后代元素維持這個“100％高度”，否則你正在為每個新的后代重新定義“100％高度”的含義。 這也可以通過創建新的塊格式化上下文來影響。 浮動或絕對定位元素（以及其他一些東西 ）時創建新的bock格式化上下文

關於表格單元格的高度......

人們經常會問“為什么我的100％高度的Div不會在桌子上工作？”。

這與表格單元的高度計算方式有關。 渲染單元格時，其內容框的高度未拉伸以匹配父行的高度。 渲染器會根據需要添加額外的填充，以使整體高度與Row的高度相匹配。 所以在這個例子中......

<tr>
   <td>
      line one<br>
      line two<br>
      line three
   </td>
   <td>
      <div style="height:100%">
         Hello world!
      </div>
   </td>
</tr>

... Div的高度是100％ - 單元格內容框的100％。 單元格的內容框被賦予額外的填充，以便它與行的整體高度相匹配。 Div的高度是其父母內容框的100％（不是整體高度）。

請參閱表高度算法 。

由於這個問題似乎幾乎每天都會被問到，我已經檢查了Wiki復選框 - 我是一個新手，但可以推測這將使其他人更容易根據需要進行更正和添加 。

Answer 2

將正文中頁面的高度設置為精確數字，然后將其他所有內容設置為100％。

另外，這里沒有高度：

#page
{
    width: 100%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

為了使高度正常工作，每個父元素必須具有一個高度集（看起來你已經完成） - 但頁面元素沒有指定高度。

嘗試在Firefox中使用Firebug來查看它正在讀取的內容以及它是否繼承。

Answer 3

你使用position：absolute; 這會使元素脫離“正常流”，這意味着元素不再對其包含元素生成的框產生影響。

所以#pageOutline下的任何一個孩子都會超出“正常流量” - 當你在沒有滾動條的情況下查看它時，你的頁面'工作'的唯一原因是在這種情況下高度：100％對應於高度視口，該點大於 - 或等於#pageOutline元素的高度。

你可能有更好的運氣顯示：inline-block; 和浮動屬性。

Answer 4

body { height: 100%; }

這是瀏覽器視口的高度，而不是html頁面的大小。

如果你需要兩個背景，你可以創建兩個包含具有不同背景屬性的其他元素的div