Question

我正在使用这种技术来粘贴页脚：http://ryanfait.com/sticky-footer/

我想在我的整个网站周围创建一个边框，它也封装了页脚但是已经遍历了整个页面，但结果却是：http://i.imgur.com/jy9vN.jpg

请注意白框不会向下移动到页脚。

以下是显示此问题的jsfiddle：http://jsfiddle.net/hc3Xu/14/

*我之前曾问过一个类似的问题，没有意识到它是页脚，我得到了一个答案，告诉我这是高度：auto！important;容器类中的内容容器未拉伸到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/

Answer 2

http://jsfiddle.net/hc3Xu/16/

我已经更改了元素以使html元素上的背景图像和body成为主要的居中内容区域。通过给它一个边框并改变它的盒子尺寸，它在外面创造了灰色边框，同时仍然保持它的100％高度。只需稍微调整一下页脚的位置就可以将其向下移动大约20个像素，使其在身体的灰色边框区域内排成一行。

希望这会有所帮助，如果您需要更全面地解释其原因，请与我联系。

具有100％高度内容容器的粘性css页脚。

2 个答案: