儿童不接受父母身高

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);}

然后它正在发生。

Here is the fiddle.

Answer 1

子元素不会从父元素继承min-height。

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

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

<强> FIDDLE

<强> FIDDLE2 (lots of content)

.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%; /* <--- */
}