なぜこのdivを100％の高さにすることができないのですか？

私は100％すべてのdivで囲まれたdivを持っています。私はこれを持っています。なぜなら、ページ全体に囲まれたほんの少しの境界線画像を持つ外側の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