html - 100% DIV height in TD with custom scroll -

html - 100% DIV height in TD with custom scroll -

i realy confused template:

class="snippet-code-css lang-css prettyprint-override">/* slider /* -------------------------------------------------- */ .slider { position: fixed; z-index: 100; overflow: hidden; left: 0; top: 20px; bottom: 0; height: auto; background: #ffffff; } .slider__in { display: table; width: 100%; height: auto !important; height: 100%; min-height: 100%; } .slider__row { display: table-row; } .slider__row_type_flex { height: 100%; } .slider__cell { display: table-cell; vertical-align: top; } .slider__row_type_flex .slider__cell { height: 100%; background: lightgreen; } .slider__cell-out { height: 100%; overflow: auto; position: relative; } .slider__cell-in { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; width: auto; } /* chat /* -------------------------------------------------- */ .chat { width: 300px; font: 13px / 18px helvetica, arial, sans-serif; letter-spacing: normal; } .chat-header { background: lightslategrey; height: 50px; } .chat-body { height: 100%; background: whitesmoke; } .chat-footer { height: 150px; background: navajowhite; } class="snippet-code-html lang-html prettyprint-override"><div class="slider chat" id="chat"> <div class="slider__in"> <div class="slider__row"> <div class="slider__cell chat-header"> liquid height header text </div> </div> <div class="slider__row"> <div class="slider__cell chat-body"> <div class="slider__cell-out"> <div class="slider__cell-in"> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> <p>liquid height content custom scroll if overfow cell height</p> </div> </div> </div> </div> <div class="slider__row"> <div class="slider__cell chat-footer"> fixed height footer here </div> </div> </div> </div>

i need center cell stretch free space of 100% table , within scrollable content custom scroll. works great ie 10 , lower makes middle row 100% , force out footer

you can accomplish expected result next change. have given jsfiddle link reference.

middle row stretch completely

i removed vertical-align: top; in css part.

.slider__cell { display: table-cell; }

html css internet-explorer