100% 最小高度在 Opera 中工作，但在其他浏览器中不行

Question

这是我正在使用的代码：

html,body{
  height: 100%;
}

div{
  min-height: 100%;
  height: auto !important;
  height: 100%;                /* this is for older IE */
}

http://jsfiddle.net/YYcLJ/

这也失败了（但在 Opera 中有效）：

div{
  min-height: 100%;
  height: auto;
}

所以 100% 的高度应该应用到所有 div 直到 html。但这仅发生在第一个 DIV :(

在 Opera 中它可以正常工作。第一个 DIV 是 body 的 100%，第二个是第一个 div 的 100%，依此类推...

有没有什么方法可以让其他浏览器也能正常工作？

Answer 1

为此，您只需要提供div 即可拥有100%; 的height 以使其工作。 另外，你的层次结构的方式，你也需要改变你的divs 的display。

此解决方案适用于跨浏览器。你可以查一下。

这里是WORKING SOLUTION

HTML：

<div class="d1">
    <div class="d2">
        <div class="d3">
            hi
        </div>
    </div>
</div>    

CSS：

html,body{
     height: 100%; /* Change 01. Div with height of 100% */
}

div{
  height: 100%;
}

.d1{
    background: #3cc;
    display:table; /* Change 02. Changing display of Divs */
    width:100%;
    height:100%;
}

.d2{
    background: #ddd;
    display:table-row; /* Change 03. Changing display of Divs */
}

.d3{
  background: #c00;
  display:table-cell; /* Change 04. Changing display of Divs */

}

我希望这就是你要找的。​​p>

Answer 2

正如specification 所说

如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为'0'（对于'min-height'）或“无”（代表“最大高度”）。

所以在这种情况下 Opera/Presto 的行为是错误的。请注意，Opera 15+ 的行为正确。

CSS3 draft 允许使用相对于视口的单位。所以在这种特殊情况下，您可以设置

div {
    height: auto;
    min-height: 100%;  /* fallback for browsers that doesn't support "vh" */
    min-height: 100vh; /* vh == 1% of viewport height */
}

Answer 3

尝试替换：

height: auto !important;

到：

height: inherit !important;

在这种情况下它可以工作，但它仍然使用高度属性设置 div 的大小而不是最小高度。

Answer 4

小提琴：http://jsfiddle.net/YYcLJ/5/

我会在div 元素上使用position: absolute。然后你会得到想要的结果。

div{
  position: absolute;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 100%;
}

这是可行的，因为绝对定位将div 元素从文档流中取出，从而允许它们的高度与指定的一样。由于我们没有声明div 元素的top 或bottom，因此它们的顶部位置将与它们的位置是静态的相同。

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

Answer 5

我想我们这里可能有一点XY Problem。看起来您已尝试实现 min-height 的解决方法以使其在古代 Internet Explorer 中运行，但该解决方法不适用于其他浏览器。

为了获得所需的跨浏览器 min-height 尝试在 .d3 上使用 height:auto; 并为 IE 6 及以下版本添加 IE 条件注释。

Working Example

html, body {
    height: 100%;
}
div {
    height:100%;
    min-height:100%;
}
.d1 {
    background: #3cc;
}
.d2 {
    background: #ddd;
}
.d3 {
    background: #c00;
    height:auto;
}

将此添加到您的 HTML 文档以支持 IE6 及以下：

<!--[if lte IE 6]>
<style>
.d3 { 
   height: 100%; 
}
</style>
<![endif]-->

在 Firefox、Chrome、Safari、Opera、IE10、IE9、IE8、IE7、IE6 和 IE5 中测试和运行。

所有的 div 都得到 height:100%; 和 min-height:100%;。在 .d3 上，height:100%; 由于selector's specificity 而被height:auto; 覆盖，但仍保留min-height:100%;。

对于 Internet Explorer 6 和条件 CSS 将应用于 .d3 并用 height:100%; 覆盖 height:auto;

这行得通，因为（谢天谢地？）IE 对待“高度”应该如何对待“最小高度”。
-CSS Tricks

Answer 6

第一件事，请尝试添加 CSS 重置脚本。

对于演示，我只是将 margin 和 padding 重置为 0。

CSS：

* {
    margin: 0;
    padding: 0;
}

那就不要使用height: auto !important;，因为浏览器会根据孩子来计算高度，这是默认值。

添加box-sizing 属性以允许您定义某些元素以以某种方式适应区域。

为了价值使用border-box。该值将指定该元素的宽度和高度（以及最小/最大属性），确定元素的边框。内容的宽度和高度是通过从指定的width 和height 属性中减去各自边的边框和填充宽度来计算的

IE(8+)、Opera(8.5+)、Chrome(*) 和 Safari(3) 支持 box-sizing 属性。

对于 IE 6/7，您可以通过 Christian Schepp Schaefer 为 box-sizing: border-box 使用 polyfill

这篇关于box-sizingChris Coyier的文章。

这个完整的解决方案可以跨浏览器工作。 Demo

HTML：

<div class="first">
    First DIV
    <div class="second">
        Second DIV
        <div class="third">
            <div class="fourth">
                Fourth DIV
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
html,body{
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
}

div{
    min-height: 100%;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(pathto/boxsizing.htc); /* Add the behavior/HTC after every box-sizing: border-box. You must add prefix with a star so IE6/7 can see it */
}

.first{
    padding:50px;
    background: red;
}

.second{
    padding:25px;
    background: green;
}

.third{
    background: yellow;
}

.fourth{
    background: brown;
}