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;
}

因此，所有div应该应用100％的高度直到html。但这只发生在第一个DIV :(

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

有没有办法让这项功能在其他浏览器中运行？

Answer 1

为此，您只需要div只有height 100%;才能使用它。此外，您的层次结构的方式，您也需要更改display的{{1}}。

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

以下是 WORKING SOLUTION

HTML：

divs

CSS：

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

我希望这就是你要找的东西。

Answer 2

正如specification所说

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则将百分比值视为＆＃39; 0＆＃39; 0 （对于＆＃39; min-height＆＃39;）或＆＃39; none＆＃39; （对于＆＃39; max-height＆＃39;）。

因此，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的大小而不是min-height。

Answer 4

我想我们这里可能会有一点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%;。由于selector's specificity，。height:100%;被height:auto;覆盖，但它仍然保留min-height:100%;。

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

这是因为（谢天谢地？）IE对待“高度”如何处理“最小高度”。
-CSS Tricks

Answer 5

首先，请尝试添加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

本文关于Chris Coyier的box-sizing。

这个完整的解决方案可以跨浏览器工作。 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;
}

Answer 6

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

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

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

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

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

在Opera中100％的最小高度工作，但在其他浏览器中没有

6 个答案: