Question

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

使用表格，这很容易：

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

CSS位置保持流畅

1 个答案: