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

我将此技术用于粘性页脚：

我想在我的整个站点周围创建一个边框，该边框也封装了页脚，但已在整个页面上传递，但结果是：

请注意，白色框没有向下移动到页脚

下面是显示此问题的JSFIDLE：

*我以前问过一个类似的问题，没有意识到这是页脚，我得到的答案告诉我，这是高度：自动！重要的；在容器类中，这是contentcontainer未扩展到100%的原因。但是，删除该选项会导致页脚未设置到页面底部的问题。所以我不知道该怎么做

我对元素做了一些修改，使

html

元素上的背景图像和

主体成为主要的、以内容为中心的区域。通过给它一个边框并更改其长方体大小，它可以在外部创建灰色边框，同时仍保持100%的高度。只需稍微调整页脚的位置，将其向下移动20个像素左右，即可使其在身体的灰色边界区域内对齐

希望这能有所帮助，如果您需要更详细的解释，请告诉我为什么这样做。
而不是：

.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保持一致

请表演，设计。它到底应该是什么样子？对不起，不清楚。这就是我希望实现的：嘿，伙计。我也有同样的问题。使用相同的粘性页脚解决方案，并有两列内容，我想拉伸。你成功了吗？：）如果您想要纯css，那么使用图像作为背景有一个肮脏的解决方法。js在那里容易得多。你想要哪一个这似乎会导致边框占据整个屏幕的左侧？有一个问题。页脚现在被白色分区中的内容重叠。您能提供问题的屏幕截图吗？如果将1px边框应用于内部div，也会有所帮助，这样更容易看到重叠的内容。如果为页脚div添加背景色，则会看到它与.wrapper中的内容重叠。