html - 页脚的位置无法固定

Question

http://jsfiddle.net/L9tqk/2/

我无法将页脚放在正确的位置

<div id="logo"></div>
<div id="content">
    <div id="trans">
    <div id="data">
        <div id="left"> </div>
        <div id="right"> </div>
    </div>
 </div>
 <div id="footer"></div>


#footer {
 position:relative;
 width:100%;
 clear:both; 
}

什么时候给

 bottom:0;

对于#footer 正常窗口它放置正确，但是当窗口大小改变时，页脚位置不正确。

Answer 1

从 #content #trans 中删除 position:absolute; 并为其设置 float:

DEMO

#content #trans {
    background: rgba(0,0,0,0.3);
    width:100%;
    height:auto;
    float:left;
    border-radius:5px;
    color:Red;
   }