css - 2分割位置

Question

再び私のdiv =（。私はこれを持っています：

<div id="header"></div>
<div id="body">
  <div id="..."></div>
  <div id="..."></div>

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

そしてCSS：

#body { width: 100%; margin 0 auto; }
#content {   position: absolute;   height: 200px; width: 100%; }
#footer {   height: 63px;   clear:both; }

結果: 多くのテキストとテキストの下のフッターを含むコンテンツ div。

すべてのコンテンツ領域の下にフッターを作成するにはどうすればよいですか?

Answer 1

このスタイリングを使用すると、要求したとおりに（赤）#contentの下に（青）#footerが表示されます。

#body {width: 600px; margin 0 auto; }
#content {position: relative; height: 200px; width: 600px; background-color: red; }
#footer {height: 63px; clear:both; width: 600px; background-color: blue; }

Answer 2

私はこの状況に何度か遭遇しました。スティッキーフッターを使用しています。いくつかのブラウザーと広く互換性があり、動作するようです。