生成div内容时，将页脚向下推到页面？

Question

我有显示图片的页面

如果在右列上单击某些内容，左列中的DIV将显示生成的内容。该Div具有固定高度，但其位置可能会根据右列上的单击位置而有所不同。正如您可以看到Div出现的时候，页脚没有被按下。

我在SO上尝试了许多解决方案来重新定位页脚，如How to keep footer at the bottom even with dynamic height website 但它们都不适合我。也许我做错了什么？

我的页脚css：

#footer{ color: #666666; background: #D3D3D3; border-top: 1px solid #AAA;
                padding: 1em; margin-top: 0; position:absolute; width:100%; }

Answer 1

DEMO：http://jsfiddle.net/WTUPn/

<div id="wrapper">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="push"></div>
</div>
<div id="footer">

</div>

<style type="text/css">
    body, html { height: 100%; }
    #wrapper {
        min-height: 100%;
        margin-bottom: -90px;
        position: relative;
    }
    #footer, .push { height: 90px; }
    #footer {
        background: #000; color: #FFF;
    }
</style>

Answer 2

显然你需要插入更多代码，但是你的页脚不能绝对定位，因为它需要一个特定的位置而不管其他div