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

这是我使用的代码：

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 是身体的 100%，第二个是第一个div 的 100%，依此类推......

有没有办法在其他浏览器中也能做到这一点？

为此

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

此解决方案跨浏览器工作。你可以检查。

这是工作解决方案

该 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 */
}

我希望这就是你要找的。

正如规范所说

如果未明确指定包含块的高度(即，它取决于内容高度(，并且此元素不是绝对定位的，则百分比值被视为"0"(表示"最小高度"(或"无"(表示"最大高度"(。

因此，在这种情况下，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 */
}

尝试替换：

height: auto !important;

上至：

height: inherit !important;

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

小提琴：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

我认为我们这里可能有点XY问题。看起来您已经尝试实现最小高度的解决方法以使其在古老的Internet Explorer中工作，但该解决方法在其他浏览器中不起作用。

为了获得所需的跨浏览器min-height请尝试在.d3上使用height:auto;并为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%;.在 .d3 上，由于选择器的特殊性，height:100%; 被 height:auto; 覆盖，但它仍然保留min-height:100%; .

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

这是有效的，因为(谢天谢地？IE对待"身高"的方式应该是如何处理"最小身高"。
-CSS技巧

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

对于演示，我只是重置margin并padding 0.

.CSS：

* {
    margin: 0;
    padding: 0;
}

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

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

对于价值使用border-box.此值将指定此元素上的宽度和高度(以及最小/最大属性(确定元素的边框框。内容宽度和高度是通过从指定的width和height属性中减去相应边的边框和填充宽度来计算

的

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

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

这篇关于克里斯·科耶尔(Chris Coyier(box-sizing的文章。

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

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

相关内容

最新更新

热门标签：