100% height not working in IE - html

Question

I'm currently having some problems displaying divs with 100% height in IE, it works fine in every other browser, it's just IE that is giving me some trouble and I'm not sure how to resolve it.
Here's some of my 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 I have a set of relatively positioned divs, each one fitting to the browser window size, like I say this all works fine in every browser except IE, in particular the 100% height style attribute not being recognised.
After doing a little bit of research I found that this may have something to do with the text being in a table (which is necessary as I want to centre the text horizontally and vertically) but I've not got a clue how this issue can be resolved, any suggestions would be greatly appreciated!

Answer 1

There are a number of strategies discussed here:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
This appears to work in IE FF & Chrome:
http://codepen.io/anon/pen/asqpL