为什么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