height：100％for< div>内部< div> with display：table-cell [英] height: 100% for <div> inside <div> with display: table-cell

问题描述

以下是使用 display：table 和 display：table-cell 的2列标记：CSS声明：
HTML ：

 < div class =table> 
< div class =cell> 
< p>文字
< p>文字
< p>文字
< p>文字
< p& ; p>文字
< p>文字
< p>文字
< / div> 
< div class =cell> 
< div class =container> Text< / div> 
< / div> 
< / div> 
  

CSS：

  .table {
 display：table; 
} 
 
 .cell {
 border：2px solid black; 
 vertical-align：top; 
 display：table-cell; 
} 
 
 .container {
 height：100％; 
 border：2px solid green; 
} 
  

但 .container 块不垂直填充父单元格。以下是JsFiddle的示例：

Here is 2 column markup using display: table and display: table-cell CSS declarations: HTML:

<div class="table">
    <div class="cell">
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS:

.table {
    display: table;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
}

.container {
    height: 100%;
    border: 2px solid green;
}

But .container block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.

What I have | What I need

Please, do not propose JS solution.

解决方案

When you use % for setting heights or widths, always set the widths/heights of parent elements as well

try the updated fiddle

http://jsfiddle.net/MGRdP/6/

这篇关于height：100％for< div>内部< div> with display：table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！