html – 为什么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模式.

如果你真的有兴趣了解它,那么没有比规格更好的地方：The Visual Formatting Model

但这是一个概述.

内联元素的高度与块元素的计算方式不同 – 因此从这里开始,这仅指块元素或已赋予新块格式上下文的元素.

首先,当你给一个100％高度的元素时,它将从它的包含块中取出它的高度,例如.它是父级,它的父级从它的父级获取它的高度,然后返回到初始包含块.

初始包含块在HTML(主体)和XML / XHTML(html)中是不同的,它的默认高度不是视口的100％,所以通常你会覆盖你的屁股并以这种方式定义它：

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

我们必须将边距和填充归零,因为在CSS中,Height属性是指Content Box的高度,如果有任何边距或填充(或边框),我们会得到一个滚动条.高度将是100％填充边界边距… W3C Box Model

例外情况是IE是在Quirks Mode … IE box model

…所以除非你通过所有后代元素维持这个“100％高度”,否则你正在为每个新的后代重新定义“100％高度”的含义.这也可以通过创建新的块格式化上下文来影响.浮动或绝对定位元素时创建新的bock格式化上下文(以及some other things)

关于表格单元的高度……

人们经常会问：“为什么我的100％高度的Div不能在桌子上工作？”.

这与表格单元的高度计算方式有关.渲染单元格时,其内容框的高度未拉伸以匹配父行的高度.相反,渲染器会根据需要添加额外的填充,以使整体高度与行的高度相匹配.所以在这个例子中……

<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％(不是整体高度).

见Table height algorithms.

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

原文地址：https://www.jb51.cc/html/231838.html

html – 为什么100％高度不是浏览器高度的100％？

解决方法

相关推荐