2011-08-09 11 views
1

http://jsfiddle.net/vol7ron/bKWtM/CSS:私は何をしようとしているページ(見えないウィンドウ)の下部に位置要素

<body> 
    <div id="head"></div> 
    <div id="body"></div> 
    <div id="foot"></div> 
</body> 

 

body { padding:0;margin:0;} 
#head { position:absolute; height:20px; width:100%; background:#900; top:0; } 
#foot { position:absolute; height:20px; width:100%; background:#090; bottom:0; } 
#body { position:absolute; top:0; z-index:2;} 

 

// filler 
for (var i=1,n=50;i<=n;i++){ 
    $('#body').append('<div>' + i + ' (filler) </div>'); 
} 

位置はtです彼はフッタを開いたウィンドウではなく、ドキュメントの最下部に置いています。緑色のバーは50行目以降に来て、オープニングビューには表示されません。

私は古典的なレイアウトを探しています。絶対的な配置がなければ、ヘッダーが上になり、次に本文が表示され、フッターを表示する必要があります。唯一の違いは、ボディがヘッダーと重なり合うようにすることです(したがって、絶対的な位置付け)。

注:

  1. 私はフッターの位置を固定している必要はありません。
  2. 私は任意の助けをいただければ幸いJavaScriptを

を使用する必要はありません。

答えて

2

あなたはこれを不必要に複雑にしました。あなたの唯一の目標がヘッダーと本文を重複させることであるなら、あなたは負のマージンを使うことができます。それで、すべてを静的に配置することができます。

の作業例:http://jsfiddle.net/uaBpx/1/

そうでなければ、あなたの例では、文書の高さは、実際に0pxあるので、私は、文書の下部に何かを配置すると考えることができます方法はありません。すべてのコンテンツを一度抜くと(絶対位置付けを介して)、高さはありません。

+0

私はあなたが正しいと思う:)私は私の実際のページにそれを与えるだろう。なぜ私はそれを難し​​くしようとしたのか分かりません – vol7ron

関連する問題