Css 生成div内容时是否将页脚向下推到页面？

我把这一页作为展示的图片

当右栏单击某个内容时，左栏上的DIV将显示生成的内容。此Div具有固定的高度，但其位置可能因右列上单击的位置而异。正如您看到的，当Div出现时，页脚不会被按下

我已经尝试了许多解决方案，以便重新定位页脚，如中所示 但是没有一个适合我。也许我做错了什么

我的页脚的css：

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

---

显然，您需要插入更多代码，但无法绝对定位页脚，因为不管其他div如何，页脚都会占据特定位置

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。

正文，html{高度：100%；}
#包装纸{
最小高度：100%；
边缘底部：-90px；
位置：相对位置；
}
#页脚，.push{height:90px；}
#页脚{
背景：#000；颜色：#FFF；
}

<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>