CSS位置底部保持流動

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