Divウィンドウの下部と適応可能な高さdiv

Question

divを常にウィンドウの一番下に置く方法はありますか？divは、その高さを変更して葉が残っているスペースを埋める方法ですか？divはスクロールしますその内容が長すぎる場合。 （私はウィンドウをスクロールしたくない）。

これは最高の画像で示されている：

div layout http://img401.imageshack.us/img401/3209/divs.png

緑のdivが常にウィンドウの下部に自分自身を置く、とオレンジのdivがギャップを埋めるだろう。ウィンドウが小さくなると、右側の画像のように、オレンジ色のdivは小さくなり、スクロールします。

緑色のdivを切り替えることができます。時には、緑色のdivはdisplay: noneになり、次にオレンジ色のdivは下に伸びます。緑色のdivに再びdisplay: blockがあると、再び画像のように見えます。

IE6で動作する必要があります。

これまでのところ私は緑のdivがで下に行くために取得することができます。

position: absolute; 
bottom: 0; 

しかし、私は私がやりたいのオレンジ色のdiv要素を取得する方法がわかりません。

Answer 1

するのではなく、固定、

http://www.alistapart.com/articles/footers/

はそれが役に立てば幸い使用する必要があり、 シナン

編集：（純粋なCSS方法）

あなたのマークアップ：

<div class="non-footer">Your content goes here.</div> 
<div class="footer">Here is for footer content.</div> 

あなたのCSS：

body, html, .non-footer { 
    height: 100%; 
    min-height: 100%; 
    width: 100%; 
} 
.footer { 
    height: 150px; 
    margin-top: -150px; 
    width: 100%; 
} 

は、私はいくつかの詳細を逃す可能性がありますが、これは動作するはずですし、それがトリックの背後にある基本的なアイデアを提供します。

シナナン。

Answer 2

あなたは別にリストで "探検フッター" を見てみることができます絶対

position: fixed; 
bottom: 0; 

Answer 3

これを試してみてください。私はそれが宇宙その後、大きくなると、あなたのオレンジ色のdivが、その後にスクロールすると思い自動

： はオーバーフローと緑のdiv の下マージン=高さとオレンジのdivの位置の相対 を設定白と緑のdivの間。 あなたの背景の問題を解決するには、簡単に背景色としてオレンジを設定することができます。 このようにして、オレンジ色のdivが実際に白と緑のdivの間のスペースとして小さいことは、ユーザーにとっては決して見えません。

Answer 4

センターのサイズを決めることなくこれを行うことはできませんJavascriptを使用してdivを作成します。

CSSの配置は、基本的には上から下に向かっているので、ページの下部にあるdivを取得するには、位置を使用してページのフローから取り除く必要があります：絶対（または位置：固定）

しかし、そのdivはページの流れから外れているので、中間のdivは下のdivの上部で停止することを知らない。下のdivの後ろに続くだけで、スクロールバーは表示されません。

Answer 5

これをテストします。頭の中でこれを入れて：

<script> 
    var int=self.setInterval(function(){clock()},100); 

    function clock() 
    { 
     var s = document.getElementById("Footer"); 
     s.style.position = "Fixed"; 
     s.style.bottom = "0px"; 
     s.style.margin = "0px"; 
     s.style.height = "20px"; 
     s.style.width = "30px"; 
    } 

    window.onload=clock 
</script> 

HTML：

<div id="Footer"></div>