为什么我不能得到这个div去100％高度

我有一个div是包裹在几个其他div都是100％。我有这样的方式，因为我有一个外部div与一个轻微的边框图像，我想包裹整个页面。为什么我不能得到这个div去100％高度

HTML：

<body> 
<div class="container" > 
    <div style="padding-top:15px; height:100%;"> 
     <div class="wrapper"> 
      <div class="contentContainer"> 
      test 
      </div> 
     </div> 
    </div> 
</div> 
</body>

CSS：

*{margin:0; padding:0;} 
body { margin: 0 auto; color: #333333; } 
html, body { color: #000000; margin:0; padding:0; height:100%; } 

.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; height:100%;} 

.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -30px; width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;} 

.contentContainer {width:920px; margin:0 auto; height:100%; }

小提琴：http://jsfiddle.net/hc3Xu/2/

来源

2012-01-25 Sackling