Question

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

我知道我可以让我的页脚扩展到容器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/

Answer 2

我正在弄乱你的jsfiddle，你可以添加

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

到footer，然后将其添加到master-wrapper-content，以防止您的内容溢出到您的页脚上。

margin-bottom: 248px;

将页脚放在底部并将其展开为全屏而不重新对齐HTML

2 个答案: