容器div上的CSS框阴影会导致滚动条

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

当内容不足时,我使用clearfooter和容器外部的页脚将页脚保持在页面底部.

我的问题是我想以下列方式在容器div上应用一个盒子阴影：

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
           position:relative; padding:0px; BACkground-color:#e6e6e6; 
           -moz-box-shadow: -3px 0px 5px rgba(0,.8),3px 0px 5px rgba(0,.8);}
#header   {height:106px; position:relative;}
#content   {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer   {height:32px; padding:0px; position:relative; width:960px; 
           margin:0px auto 0px auto;}

正如你可以看到它在容器div的每一侧都有一个阴影.然而,在这样做时,当内容没有占据整个高度时,由于模糊,阴影推动经过页脚的底部仍然存在滚动条.

有没有办法防止阴影越过容器div的边缘并导致滚动条？

谢谢你的帮助！