为什么100%高度不是浏览器高度的100%？

编辑:从服务器中删除文件

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.这怎么可行？

简短的回答:这很复杂.要真正理解影响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的高度相匹配.所以在这个例子中......

   
      line one

      line two

      line three
   
   
      

         Hello world!
      
   

... Div的高度是100% - 单元格内容框的100%.单元格的内容框被赋予额外的填充,以便它与行的整体高度相匹配.Div的高度是其父母内容框的100%(不是整体高度).

请参阅表高度算法.

由于这个问题似乎几乎每天都会被问到,我已经检查了Wiki复选框 - 我是一个新手,但可以推测这将使其他人更容易根据需要进行更正和添加.