html - div用绝对值填充父级的剩余高度

Question

我需要一个高度是其父级剩余高度的 div。

就像这个小提琴

CSS：

.h_100
{
    height:100%
}

body, html
{
    margin:0; 
    padding:0;
    height:100%;
}

.table
{
    width: 100%;
    display: table;
}

.table_row
{
    width: 100%;
    display: table-row;
}

但它似乎在 IE 中有效

有什么建议可以解决我的问题吗？

Answer 1

我不确定你在找什么。但这显示了如何使用绝对定位的包装器，其中包含一个表格 div 来自动填充包装器。

http://jsfiddle.net/hyvgy36s/1/

#wrapper {
    position:absolute;
    top: 10px;
    bottom: 0;
    left:0;
    right:0;
}
#container {
    display:table;
    width: 400px;
    height: 100%;
}

Answer 2

这是工作示例。

#container {
    display:table;
    width: 400px;
    height: 100%;
    position:absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
}