height: 100% for <div> inside <div> with display: table-cell

http://stackoverflow.com/questions/22220698/height-100-for-div-inside-div-with-display-table-cell

by John-Philip Johansson

HTML

<div class="table">
    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">
            <div class="top">
                <div class="cell">Top</div>
            </div>
            <div class="bottom">
                <div class="cell">
                    <div class="btn">Bottom</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

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

.top, .bottom {
    display: table;
    width: 100%;
    border: 2px solid red;
    min-height: 50%;
}

.bottom .cell {
    vertical-align: bottom;
}

.btn {
    border: 2px solid blue;
}
}