Question

我将HTML定义为此。

<div class="a">
     <div class="b" >
         something
     </div>
     <div class="c" >
         <div class="d">
         </div>
    </div>
</div>

CSS样式定义为：

html,body
{
    height:100%;
    width:100%;
}
.a
{
    display:table;
    height: 100%;
    width: 99%;
    background: green;
    padding-top: 10px;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.b
{
    background: yellow;
    display:table-row;
    padding-bottom: 10pt;
    margin-left: 5pt;
    float: left;

}
.c
{
    background: pink;
    display:table-row;
    height:100%;
    width: 100%;
}

.d
{
    display: block;
    width: 100%;
    height: 100%;
    float: left;
}

在Firefox，Safari，Chrome中，类“d”的div与其父div元素具有相同的高度。但在IE9中，类“d”的div高度等于0.是否有人知道原因。

以下是上述测试代码的链接 http://jsfiddle.net/ZDY4P/19/

Answer 1

删除 .d 中的浮动属性。并在 .c 代表的display：table-row中使用 table-cell 表示 .d 。适用于IE9：

http://jsfiddle.net/ZDY4P/45/

.d
{
    background: orange; /* added a marker color */
    display: table-cell;
    width: 100%; /* or 50% or auto for multiple columns... */
    height: 100%;
}

如果你需要在 .c 中有多个100％高度的列，请添加多个D，如jsfiddle所示。

对于IE9的荣誉：我没有列表，允许使用哪种显示嵌套，但在display:block; float: left内嵌套display:table-row可能有点无效，说旧的HTML：

<table>
  <tr>
    <div> <!-- expected: a <td> -->
       ..

“height = 100％”在IE9中不起作用

1 个答案: