html - 使用显示 :table have 100% height of parent div 制作 div

Question

我正在尝试使用 display:table 制作一个 div 填充其父 div 的 100%。这是 div 结构:

<div id="container">
   <div id="header"></div>
   <div id="body">
       <div id="mytablediv">
    <div class="row">
             <div id="left"> </div>
             <div id="content">&nbsp; </div>
                 <div id="right"> </div>
            </div>
       </div>
   </div>
   <div id="footer"></div>
</div>

这是 CSS:

html, body { margin:0; padding:0; height:100%; }
#container { min-height:100%; position:relative; }
#header { background:#ff0; padding:10px; }
#body { padding:10px; padding-bottom:60px; }
#footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf;
}
#mytablediv { display:table; }
#row { display:table-row; }
#left, #content, #right {display:table-cell;}
#left, #right {background-color:red;}

这是我的完整代码。现在我真正想为 #mytablediv 做的是填充页眉和页脚之间的整个空白区域。

这是一个live jsFiddle example .

Answer 1

您可以使用 inheritance这里的属性，只需将以下内容用于 #mytablediv

#mytablediv {
    height: inherit;
}

您已将 div#container 指定为 100% 高度，您需要将上述属性分配给 div#body 以获得所需的结果。