html - 将页脚放在底部并在不重新对齐 HTML 的情况下将其扩展到全屏

Question

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

我知道我可以让我的页脚扩展到容器 div 之外，如 Extend child div beyond container div 中所述.但是我想知道不使用JS是否可以实现？将页脚设置为 position:absolute;底部:0；右:0； left:0 不起作用，因为如果我在页面上向下滚动，页脚会卡住。我也不能使用 position:fixed 和 bottom:0，因为它会使其他内容滚动到它下面，这不是我想要的。

HTML:

<div class="master-wrapper-page">
<div class="master-wrapper-content">
<footer></footer>
</div>
</div>

CSS:

.master-wrapper-page {
  margin: 2px auto 0;
  background: none repeat scroll 0 0 #fff;
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
  margin: 30px auto 0;
  width: 960px;
}

.master-wrapper-content {
  background: none repeat scroll 0 0 #ffffff;
  float: left;
  margin: 15px 15px 0;
  padding: 15px 0 0;
  text-align: left;
  width: 930px;
  margin: 0;
}

footer {
  background-color: #1a1a1a;
  clear: both;
  height: 248px;
  z-index: 90000;
}

这是 jsfiddle，以防它有帮助:http://jsfiddle.net/6rLco5kq/谢谢。

Answer 1

看这里。你是这个意思吗？

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

http://jsfiddle.net/6rLco5kq/1/