6

这是我正在使用的代码：

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%，依此类推...

有什么方法可以在其他浏览器中进行这项工作吗？

4

6 回答 6

4

为此，您只需要提供todiv即可使其正常工作。另外，你的层次结构的方式，你也需要改变你的。height100%;displaydivs

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

这是工作解决方案

的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 */

}

我希望这就是你要找的。

于 2013-08-05T09:48:49.857 回答
3

正如规范所说

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

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

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

div {
    height: auto;
    min-height: 100%;  /* fallback for browsers that doesn't support "vh" */
    min-height: 100vh; /* vh == 1% of viewport height */
}
于 2013-08-10T20:03:02.273 回答
2

try replace the: 

height: auto !important;

on to:

height: inherit !important;

in this case it working but it still height property set the size of divs not min-height.

于 2013-08-08T13:32:26.537 回答
1

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

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

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

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

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

于 2013-08-09T02:15:46.293 回答
1

我认为我们可能会遇到一些XY 问题。看起来您已尝试实现 min-height 的解决方法以使其在古老的 Internet Explorer 中运行，但该解决方法不适用于其他浏览器。

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

工作示例

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%;. On .d3由于选择器的特异性height:100%;而被覆盖，但它仍然保留。height:auto;min-height:100%;

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

这是有效的，因为（谢天谢地？）IE 对待“高度”应该如何对待“最小高度”。
-CSS技巧

于 2013-08-08T15:39:30.067 回答
1

首先重要的是，请尝试添加 CSS 重置脚本。

对于演示，我只是将marginand重置padding为0.

CSS：

* {
    margin: 0;
    padding: 0;
}

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

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

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

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

对于 IE 6/7，您可以使用Christian Schepp Schaeferbox-sizing: border-box的polyfill

这篇文章box-sizing由Chris Coyier撰写。

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

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;
}
于 2013-08-09T00:28:31.200 回答