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

Posted 2023-02-23

【中文标题】div用绝对值填充父级的剩余高度

【英文标题】：Div fill remaining height of parent with absolute

【发布时间】：2014-09-03 14:56:37

【问题描述】：

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

Like this fiddle

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 中不起作用

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

【问题讨论】：

结果应该是什么样子？

第一把小提琴jsfiddle.net/S8g4E/1360

【参考方案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%;

【参考方案2】：

这是一个工作示例。

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