Kushagra Gour's solution does work (at least in Chrome and IE) and solves the original problem without having to use display: table;
and display: table-cell;
. See plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU
Setting min-height: 100%; height: 1px;
on the outer div causes its actual height to be at least 100%, as required. It also allows the inner div to correctly inherit the height.