html - 子 div 不采用父身高

Question

我希望孩子 div.cell的高度占据父母的 100% 高度。但它没有发生。

HTML：

<div class="header">
    header
</div>
<div class="wrapper">    
    <div class="padding">
        <div class="table bg">
            <div class="cell">
                hello world
            </div>
            <div class="cell">
                dummy text
            </div>
        </div>
    </div>
</div>
<div class="footer">
    footer
</div>

CSS：

html,body{height:100%;}
body{margin:0;padding:0;}
.footer,.header{background:black;height:30px;color:white;}
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
.padding{padding:20px;}
.table{display:table;width:100%;}
.cell{display:table-cell;}
.bg{background:#ccc;}

我认为这没有发生，因为我有

.wrapper{min-height:calc(100% - 60px);height:auto !important;}

如果我更改.wrapper为

.wrapper{height:calc(100% - 60px);}

然后它正在发生。

这是小提琴。

Answer 1

子元素不继承min-height自父元素。

所以换min-height:calc(100% - 30px);...

到height:calc(100% - 30px);您的包装器上，然后在子 div 上设置 height:100% 以继承该高度。

小提琴

FIDDLE2（大量内容）

.wrapper
{
  height:calc(100% - 60px); /* <--- */
}
.padding
{
  padding:20px;
  height: 100% /* <--- */
  -moz-box-sizing: border-box;
  box-sizing: border-box; /* <--- */
}
.table
{
  display:table;
  width:100%;
  height: 100%; /* <--- */
}