如何在底部设置页脚?

Mar*_* Ma 0 css

以下是我的代码

HTML:

<div id="content">
<div id="A">
A
</div>
<div id="B">
B
</div>
</div>
<div id="footer">
  footer
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

#content{
  width:600px;
}
#A{
  position:relative;
  float:left;
  background:#0000ff;
  width:300px;
  height:600px;
}
#B{
  position:relative;
  float:right;
  background:#00ff00;
  width:300px;
  height:100px;
}
#footer{
  background:#ff0000;
}
Run Code Online (Sandbox Code Playgroud)

我想在底部设置页脚,但页脚位于div B.

当我使用float:left for footer,虽然页脚在底部,我必须设置页脚的宽度,但我想让页脚的宽度等于浏览器窗口的宽度.

那么如何在底部设置页脚并将页脚的宽度设置为等于浏览器窗口的宽度?任何建议表示赞赏.