CSS 位置底部保持流动

Question

我正在尝试创建一个页脚类型的 block ，它位于 block 的底部，但在调整大小时会与 block 顶部的元素发生冲突。

有了表格，这就很容易了:

<table style="height: 100%;" border="1">
    <!-- border so you can see how it resizes -->
    <tr id="TOP" style="height: 3em;"><td>TOP</td></tr>
    <tr id="GAP"><td>GAP</td></tr>
    <!-- content only so you can see what's going on;
         I want this to render as empty space -->
    <tr id="BOTTOM" style="height: 3em;"><td>BOTTOM</td></tr>
</table>

但我想在不使用表格的情况下执行此操作。

Answer 1

http://www.cssstickyfooter.com似乎有答案:

<div id="wrap">
    <div id="header">
    </div>
    <div id="main">
    </div>
</div>

<div id="footer">
</div>


html, body { height: 100%; }

#wrap { min-height: 100%; }

#main {
    overflow:auto;
    padding-bottom: 150px;  /* must be same height as the footer */
}

#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}