html - 100% height not working in IE -

html - 100% height not working in IE -

i'm having problems displaying divs 100% height in ie, works fine in every other browser, it's ie giving me problem , i'm not sure how resolve it. here's of code: html:

<div id="content"> <div id="box-01" class="slide" style="color: #f26964; background-color: #003218;"> <div class="text-content"> text goes here </div> </div> <div id="box-02" class="slide" style="color: #f2f1ef; background-color: #70858e;"> <div class="text-content"> text goes here </div> </div> <div id="box-03" class="slide" style="color: #f2f1ef; background-color: #003218"> <div class="text-content"> text goes here </div> </div> </div>

css:

html, body { margin:0; padding:0; height:100%; border:none } #content { width: 100%; height: 100%; margin: 0; position: absolute; top: 0px; left: 0px; } .slide { width: 100%; height: 100%; margin: 0 auto; text-align: center; position: relative; display: table; vertical-align: middle; background: no-repeat 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .text-content { text-align: center; display: table-cell; vertical-align: middle; text-transform: uppercase; }

so have set of relatively positioned divs, each 1 fitting browser window size, works fine in every browser except ie, in particular 100% height style attribute not beingness recognised. after doing little bit of research found may have text beingness in table (which necessary want centre text horizontally , vertically) i've not got clue how issue can resolved, suggestions appreciated!

there number of strategies discussed here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

this appears work in ie ff & chrome: http://codepen.io/anon/pen/asqpl

html css internet-explorer