html - マージンでフッターを下げますか?

Question

これまでのところ、すべてのバグが把握されているように見えますが、1 つを除いて... フッターも下部に接続されていません。コンテンツがフッターの下に伸びるため、相対メソッドと絶対メソッドを削除する必要がありました。したがって、コンテンツとフッターの間の領域を動的に拡張して、フッターを下部に保つ何らかの方法が必要です。これを行う方法はありますか？高さ 100% に設定された「ボックス ディバイダー」がありますが、何もしないようです。

ライブコードはこちらhttp://jordan.rave5.com/tmp/

CSS

            #body {
                transition: height 2s;
                -webkit-transition: height 2s;
                width: 74%;
                min-width: 1024px;
                height: auto !important;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
                padding: 10px;
                background-color: #080908;
                 -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                border-radius: 10px;
                -moz-box-shadow: 0px 0px 6px #000;
                -webkit-box-shadow: 0px 0px 6px #000;
                box-shadow: 0px 0px 6px #000;
                /* For IE 8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
                /* For IE 5.5 - 7 */
                filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
            }

            #body-content {
                display: none;
                height: 100%;
            }

            #box-divider {
                width: 75%;
                min-width: 1024px;
                height: 100%;
                margin: 20px auto 20px;
            }

            #footer {
                width: 100%;
                height: 150px;
                background-image: url(images/black-trans.png);
                background-repeat: repeat;
                padding: 0 0 20px;
            }

HTML

    <div id="background-overlay">
        <div id="background-gradient">

            <div id="header-image-grad">

                    <div id="header-container">
                        <div id="header">
                            <div id="navigation-container">
                                <div id="navigation">
                                    <span id="nav">Navigation Area...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                <div id="header-image-border">
                    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
                    <div class="image-grad"></div>
                </div>

            </div>

            <div id="body">
                <div id="body-content"></div>
                <div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
            </div>

            <div id="box-divider">
                &nbsp;
            </div>

            <div id="footer">
                <br />
                <div id="footer-content">
                    Footer Area...
                </div>
            </div>

        </div>
    </div>