html - コンテナー要素の下部に div を配置する

Question

私がデザインしている Web ページのレイアウトは、次のフィドルのようなものです: http://jsfiddle.net/5sTub/

編集: 注: 粘着性のあるフッターを取得しようとしているわけではありません。ページの一番下に配置したいだけです。答える前にフィドルを見てください

フッターをページの下部に配置しようとしていますが、上記のリンクでわかるようにできません。コンテナ要素の position:relative; の設定など、インターネットで見つけたすべてを試しました。実際、コンテナ div をコードに追加してその を作成し、次の css を footer : に追加するとposition:absolute;、フッターがどこかに消えてしまうようです。私は長い間静かにして以来、この問題に悩まされてきました。これまでに見つけた唯一の解決策は、ヘッダーとコンテンツとフッターを設定することです. JavaScriptの使用を避けたい。助けてください、事前に感謝します。bottom:0;position:relative;position:absolute; bottom: 0;position:static;

編集:私が必要なものの図:

青がフッター、濃い青がヘッダー、水色が実際のコンテンツ、ピンクがスティッキー div です。フッターを固定したくありませんが、通常のページで見られるようなものにしたいのですが、唯一の問題は、ページの下部にとどまらないことです（フィドルを参照）

Answer 1

これを使って

このcssプロパティをcssに追加します

html, body{height:100%}


div#footer {
        color: white;
        background: rgba(68, 68, 68, 0.8);
        width: 100%;
        position:absolute;
        bottom:0;
    }

Answer 2

これにはSticky Footerメソッドを使用できます。これを読んでくださいhttp://ryanfait.com/sticky-footer/

たとえば、次のように記述します。

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html{
 height:100%;
}
.container{
 min-height:100%;
}
.footer{
 height:40px;
 margin-top:-40px;
}

詳細については、これを確認してください

Answer 3

http://jsfiddle.net/5sTub/1/に役立ちますか