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模式。

如果你真的有兴趣了解它，那么没有比规范更好的起点：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％高度”的含义。这也可以通过创建新的块格式化上下文来影响。浮动或绝对定位元素时（以及some other things）

，可以创建新的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％（不是整体高度）。

请参阅Table height algorithms。

由于这个问题似乎几乎每天都会被问到，我已经检查了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，其中包含具有不同背景属性的其他元素

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

4 个答案:

但这是一个概述。

关于表格单元格的高度......