как установить нижний колонтитул в нижней части?

Question

следующий мой код

HTML:

<div id="content">
<div id="A">
A
</div>
<div id="B">
B
</div>
</div>
<div id="footer">
  footer
</div>

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;
}

Я хочу установить нижний колонтитул внизу, но нижний колонтитул находится чуть ниже div B.

когда я использую float: left для нижнего колонтитула, хотя нижний колонтитул находится внизу, я должен установить ширину нижнего колонтитула, но я хочу, чтобы ширина нижнего колонтитула была равна ширине окна браузера.

тогда как я могу установить нижний колонтитул внизу и установить ширину нижнего колонтитула равной ширине окна браузера? Любое предложение приветствуется.

Answer 1

CSS Sticky Footer

Answer 2

Вы можете добавить очищающий элемент позади вашего содержимого div. Этот элемент должен быть плавающим (clear: both), чтобы нижний колонтитул появлялся внизу.

редактирование: Взгляните здесь