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

编辑：已从服务器删除文件

这是我用来尝试一些东西的布局。让我困惑的是，当浏览器的大小调整到垂直滚动条出现时，背景并没有达到浏览器窗口的全部高度。。。事实上，它们比内容面板短，尽管设置为高度：100%

这发生在IE8、FF3和Chrome中，因此它显然是一个非常符合标准的错误（通过了XHTML1.0Strict和CSS2.1+的验证！）！有人能指出明显的错误吗

编辑：我按照建议在Firebug中查看了它。我发现pagediv突出在父pageOutline div的底部。这是如何工作的

body { height: 100%; }

这是浏览器视口的高度，而不是html页面的大小

---

如果您需要两个背景，您可以创建两个div，其中包含具有不同背景属性的其他元素

将页面在正文中的高度设置为一个精确的数字，然后为其他所有内容设置100%

另外，这里没有高度：

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

要使高度正常工作，每个父元素都必须设置高度（看起来您已经设置了），但页面元素没有指定高度

---

尝试在Firefox中使用Firebug来查看它正在读取的内容以及它是否正在继承；这将使元素脱离“正常流”，这意味着元素不再对其包含元素生成的框产生影响

因此#pageOutline下的任何子项都将超出“正常流”——当您在没有滚动条的情况下查看页面时，页面“工作”的唯一原因是，在这种情况下，高度：100%对应于视口的高度，该高度大于或等于#pageOutline元素的高度

---

使用display:inline块可能会更幸运；和浮点属性。

简单的回答是：它很复杂。要真正理解影响CSS 100%高度（和宽度）的所有因素，您需要了解以下术语：视图端口、初始包含块、流、溢出、内联格式上下文、块格式上下文、W3C框模型、IE框模型和怪癖模式

如果您真的对掌握它感兴趣，那么没有比规范更好的起点了：

但这里有一个概述。 内联元素上的高度的计算方式与块元素不同，因此从这里开始，它仅指块元素或已给定新块格式上下文的元素

首先，当你给一个元素100%的高度时，它将从它的包含块获取它的高度，例如，它的父元素和它的父元素从它的父元素获取它的高度，依此类推回到初始包含块

初始包含块在HTML（正文）和XML/XHTML（HTML）中不同，它的默认高度不是视口的100%，因此通常情况下，您会覆盖臀部，并以以下方式定义它：

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

我们必须将边距和填充置零，因为在CSS中，Height属性指的是内容框的高度，如果有边距或填充（或边框），我们会得到一个滚动条。高度为100%+填充+边框+边距

例外情况是如果IE在

…因此，除非您通过所有子体元素保持“100%高度”，否则您将为每个新的子体重新定义“100%高度”的含义。创建新的块格式上下文也会影响此操作。当浮动或绝对定位元素（以及）时，可以创建新的块格式上下文

关于表格单元格的高度。。。 人们经常会问：“为什么我的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%（不是总高度）

看

---

由于这个问题几乎每天都会被问到，我已经勾选了Wiki复选框——我是一个新手，但可能这会使其他人更容易根据需要进行更正和添加。

我将身高作为测试添加到身体，将html标记添加到测试中。删除它们没有任何区别。外部元素的高度和宽度仍然与浏览器视口匹配，“body”标记只是一个示例，我不了解。我无法在页面上设置高度，因为它包含的其他元素可能大小可变。关键是它应该缩放以适应内容，当然？如果页面设置为100%高度（视图区域），那么这是相对于浏览器窗口的。滚动条会改变视图区域的高度，因此您的页面仍然设置为与上一页相同的值。如果将顶层高度设置为2000px和100%这样的值，子元素将得到所需的值。基本上，浏览器视图区域会更改，但使用100%时，浏览器不会刷新页面以显示新值。而是使用一个值，它将保持不变。“一个值”？具体在哪个部门？我上传了一个更新的版本，所有的div都有name/id，所以你可以编辑你的帖子来指定你要更改的内容吗？html，body{height:1200px；}只需将px值的100%设置为最上面的值。在哪个div上？我所有的尝试都完全失败了。