height: 100% for inside with display: table-cell

Question

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

Answer 1

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

.table {
    display: table;
    height: 100%;
}

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

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

    

        
Text
        
Text
        
Text
        
Text
        
Text
        
Text
        
Text
        
Text
    
    

        
Text