将页脚放在底部，并将其展开到全屏，而无需重新对齐HTML

我有一个页脚，它可以扩展到整个屏幕，我的内容区域是960像素宽。我希望页脚始终位于页面底部。现在的问题是，我不能将footer的html放在末尾，因为我遵循NopCommerce框架，我必须将所有内容放在两个主包装器div中，这两个包装器div的宽度为960px和930px

我知道我可以使页脚扩展到容器div之外，如中所述。但我想知道，不使用JS是否可以实现这一点？将页脚设置为位置：绝对；底部：0；右：0；左：0不工作，因为如果我向下滚动页面，页脚会卡住。我也不能使用position:fixed和bottom:0，因为它会使其他内容在它下面滚动，这不是我想要的

HTML:

以下是JSFIDLE，以防它有所帮助：

---

谢谢。

看这里。你是这个意思吗

footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: #1a1a1a;
  clear: both;
  height: 248px;
  z-index: 90000;
}

---

我在摆弄你的JSFIDLE，你可以添加

position: fixed;
bottom: 0;
width: xx;

添加到

页脚

，然后将其添加到

主包装内容

，以防止内容溢出到页脚上

margin-bottom: 248px;

---

直接从问题体：…它会使其他内容滚动它下面，这不是我想要的。添加位置固定和底部：0不起作用，因为它使页脚粘在屏幕底部（在位置的情况下：固定）或在中间（在位置的情况下：绝对），但它不向下滚动与页面的其余部分。你们可能会看到它自己，因为我已经更新了我的小提琴，包括页脚以上的内容，以便滚动行为也可以检查。

position: fixed;
bottom: 0;
width: xx;

margin-bottom: 248px;