height:100%; not working

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven’t an idea s to why it’s not succeeding. To see the page you can go here.

body {
  height:100%;
  color:#FFF;
  font: normal 28px/28px 'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background:#222 url('') no-repeat center center fixed;
  overflow:hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}


.holder {
  height:100%;
  margin:auto;
}


#s7 {
  width:100%;
  height:100%:
  margin:auto;
  overflow: hidden;
  z-index:1;
}


#s7 #posts {
  width:100%;
  min-height:100%;
  color: #FFF;
  font-size: 13px;
  text-align:left;
  line-height:16px;
  margin:auto;
  background:#AAA;
}
<body>
<div class="nav">
  <a class="prev2" id="prev2" href="#"><img
  src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png"></a>
  <a class="next2" id="next2" href="#"><img
  src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png"></a>
</div>

<div class="holder">
<tr><td>
<div id="s7">
{block:Posts}
<div id="posts">

solution

Since nobody has mentioned this..

Modern Approach:

As an alternative to setting both the html/body element’s heights to 100%, you could also use viewport-percentage lengths:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh (which is the height of the viewport) - (example)

body { height: 100vh; }

Setting a min-height also works. (example)

body { min-height: 100vh; }

These units are supported in most modern browsers - support can be found here.