css - 带有 100% 高度内容容器的粘性 css 页脚。

Question

我将此技术用于粘性页脚:http://ryanfait.com/sticky-footer/

我想在我的整个网站周围创建一个边框，它也封装了页脚，但绕过了整个页面，但结果是这样的:http://i.imgur.com/jy9vN.jpg

注意白框没有向下移动到页脚。

这是显示此问题的 jsfiddle:http://jsfiddle.net/hc3Xu/14/

*我之前问过一个类似的问题，但没有意识到这是页脚，我得到的答案告诉我这是高度:auto !important;在容器类中，这是 contentcontainer 未拉伸(stretch)到 100% 的原因。然而，删除它会导致页脚未设置到页面底部的问题。所以我无法弄清楚如何进行。

Answer 1

代替:

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

尝试类似的东西:

.container {min-height:100%;  height: auto !important; 
           margin: 0 auto -30px;  width:980px; 
           box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
           -moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}

然后您还需要调整页脚的左侧和顶部边距，使其与您的 contentContainer div 保持一致。

http://jsfiddle.net/z5geM/