0

出于某种原因，在某些浏览器中，嵌套元素min-height不会继承祖父母的高度。

<html style="height: 100%">
    <body style="min-height: 100%">
        <div style="min-height: 100%; background: #CCC">
            <p>Hello World</p>
        </div>
    </body>
</html>

我没有费心在不同的浏览器版本之间进行太多测试，但在 Chrome 26 和 Opera 12.14 中，它会按我的预期显示，灰色背景覆盖了大部分屏幕，左上角有 Hello World。

但是，在 IE 9 和 Firefox 20 中，灰色背景只是单行文本的高度。
进一步测试，添加：

position: relative对 div 没有任何改变
min-height: inheritdiv 也没有
position: absolute改变宽度，但在height上述所有浏览器中都是 100%，除了 IE 9，其中背景仅覆盖文本。
position: fixed类似于position: absolute，除了 IE 9 恢复到 100% 宽度的原始行为。
float: left与 类似position: absolute，只是 Firefox 20 也缩小了背景以仅覆盖文本。

来自http://www.w3.org/TR/CSS2/visudet.html#the-height-property：

如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'

是否min-height被认为是明确的？我认为这是浏览器之间的混淆。使用position: absolute，它修复了 Firefox，并且只有 IE 9 有意外行为（这并不意外，因为 IE）。

是否有可能在主要浏览器中保持一致？

请不要建议需要 JavaScript 或具有固定高度的正文的答案。我知道这些是可能的解决方法，但这不是我想要实现的。使用position: absolute也会破坏我的布局，因为它会将元素拉出流程，并且要定位在动态大小的元素下方，唯一的解决方法是 JavaScript。

4

1 回答 1

0

首先，您的观察：

在 Chrome 26 和 Opera 12.14 中，它按我的预期显示，灰色背景覆盖了大部分屏幕，左上角有 Hello World。

似乎确实不正确，在我的 Chrome 版本 26 中，它只显示灰色背景，单行文本的高度。（就像 Firefox 和 IE9 一样）。根据您引用的 w3 规范，我认为这是完全正确的，因为未明确指定body包含的高度。div

你可以用display: table,display: table-row和做一些事情display: table-cell。那你就完全不需要min-height了。我已经在Chrome 26、Safari 5.1.7、Firefox 20、IE10、IE9 模式下的IE10、IE8 模式下的 IE10 中测试了这个jsFiddle，它在所有这些浏览器中的呈现完全相同，在 IE7 模式下使用 IE10时它开始中断.

CSS

html {
  display: table;
  height: 100%;
  width: 100%;
}
body {
  display: table-row;
}
div {
  display: table-cell;
  background: #CCC;
}
于 2013-04-20T03:23:44.983 回答