[解決済み] DIVをページ下部に整列させる

質問

検索結果ページの下部に配置する必要のあるDIVがあります。 問題 があるたびに 検索結果なし または 検索結果の行数が少ない がページに表示されると DIVがページの下から上に上がる .

しかし、このように配置する必要があります。

がある場合は必ず 行数 となり、ページが スクロールダウン であれば、DIVはこのように配置する。

現在のコードは次のようになります。

        <div id="bottom-stuff>

            <div id="bottom">
                             // DIV stuff
            </div>

        </div>


#bottom-stuff {
    padding: 0px 30px 30px 30px;
    margin-left:150px;
    position: relative;
}

#bottom{

    position: absolute; bottom: 0px; 
}

解決方法は？

なるほど、言いたいことはわかったので、見てみましょう......。

HTMLです。

<div id="con">
   <div id="content">Results will go here</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

CSSです。

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
div {
    outline: 1px solid;
}
#con {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

このデモでは、コンテンツの高さを height: 1000px; 下のほうにスクロールしていく様子がわかると思います。

デモはこちら

このデモでは、コンテンツの高さを height: 100px; スクロールがない状態でどのように表示されるかを見ることができます。

デモはこちら

つまり、これはフッターをdivの下に移動させます。 content しかし、コンテンツが画面より大きくない場合（スクロールしない場合）、フッターは画面の下に表示されます。これは、あなたが望むものだと思います。見て、それを使って遊んでみてください。

背景を付けて見やすくするために、フィドルを更新しました。