css绝对位置父级中的子级高度，显示表格单元格在IE中不工作_Css_Internet Explorer_Position_Absolute_Tablecell

css绝对位置父级中的子级高度，显示表格单元格在IE中不工作

css internet-explorer

css绝对位置父级中的子级高度，显示表格单元格在IE中不工作,css,internet-explorer,position,absolute,tablecell,Css,Internet Explorer,Position,Absolute,Tablecell,关于在父显示中定位绝对div的快速问题：IE中的表格单元格我已经创建了一个我试图创建的布局的JSFIDLE，它在chrome和firefox中工作，但在IE中，它打破了子级的.list容器绝对高度（即se，用于填充从顶部118px到底部的所有空间），当它位于带有display:table cell的父级内部时是否有任何IE风格规则，我错过了，以帮助它呈现绝对的孩子？这在IE中是可能的吗 html，正文{ 身高：100%；保证金：0；填充：0px； } .表{ 显示：表格；宽度：10

关于在父显示中定位绝对div的快速问题：IE中的表格单元格

我已经创建了一个我试图创建的布局的JSFIDLE，它在chrome和firefox中工作，但在IE中，它打破了子级的.list容器绝对高度（即se，用于填充从顶部118px到底部的所有空间），当它位于带有display:table cell的父级内部时

是否有任何IE风格规则，我错过了，以帮助它呈现绝对的孩子？这在IE中是可能的吗

html，正文{
身高：100%；
保证金：0；
填充：0px；
} 
.表{
显示：表格；
宽度：100%；
身高：100%；
} 
.第{
显示：表格行；
宽度：100%；
身高：100%；
} 
.表格单元格{
身高：100%；
宽度：50%；
边框：1px实心#000；
显示：表格单元格；
位置：相对位置；
} 
.header{
位置：相对位置；
顶部：0px；
高度：112px；
边际：0px；
边框：3件纯蓝；
背景：rgba（0,0230,2）；
} 
.list容器{
位置：绝对位置；
顶部：118px；
左：0px；
底部：0px；
右：0px；
边际：0px；
溢出：自动；
溢出x：隐藏；
边框：3px实心#CCC；
背景：rgba（0,0,0,1）；
}

我发现在IE中，表格单元格只接受子元素的高度。如果添加的包装器div.table的样式为100%，且在header.header和div.list-container周围具有100%的长度和高度，它将为w parent div.table-cell提供父表100%的高度

下面是一个JSFIDLE，显示了这些更改：

html，
身体{
身高：100%；
保证金：0；
填充：0px；
}
.桌子{
显示：表格；
宽度：100%；
身高：100%；
}
.行{
显示：表格行；
宽度：100%；
身高：100%；
}
.表格单元格{
身高：100%；
宽度：50%；
边框：1px实心#000；
显示：表格单元格；
位置：相对位置；
垂直对齐：顶部；
}
.标题{
位置：相对位置；
顶部：0px；
高度：112px；
边际：0px；
边框：3件纯蓝；
背景：rgba（0,0230,2）；
}
.列表容器{
位置：绝对位置；
顶部：118px；
左：0px；
底部：0px；
右：0px；
边际：0px；
溢出：自动；
溢出x：隐藏；
边框：3px实心#CCC；
背景：rgba（0,0,0,1）；
}

我注意到，在chrome和firefox中，父div.table-cell的计算样式是表的完整高度，但在IE中，div.table-cell的高度是子相对header.header元素的高度。

html, body{ 
    height:100%; 
    margin:0; 
    padding:0px; 
} 
.table{ 
   display : table; 
    width : 100%; 
    height : 100%; 
} 
.row{ 
    display : table-row; 
    width : 100%; 
    height : 100%; 
} 
.table-cell{ 
    height:100%; 
    width:50%; 
    border:1px solid #000; 
    display : table-cell; 
    position: relative; 
} 
.header{ 
    position:relative; 
    top:0px; 
    height:112px;  
    margin:0px; 
    border:3px solid blue; 
    background: rgba(0,0,230, .2); 
} 
.list-container{ 
    position:absolute; 
    top:118px; 
    left:0px;
    bottom:0px; 
    right:0px;  
    margin:0px; 
    overflow:auto; 
    overflow-x:hidden; 
    border:3px solid #CCC;
    background: rgba(0,0,0,.1); 
} 

<body>
    <div class="table">
    <div class="row">
        <div class="table-cell">
            <header class="header"></header>
            <div class="list-container">
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>
        </div>
        <div class="table-cell">
        </div>
    </div>
    </div>
</body>