不帶父母身高的子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到

它發生210

然後它正在發生。

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