Question

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

<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

将fixed位置设为页脚。

#footer{
    position:fixed;
}

Demo here.

OR：

将hidden溢出到#content #trans。

写：

#content #trans{
    overflow:hidden;
}

DEMO here.

Answer 2

从position:absolute;移除#content #trans并将float设置为：

DEMO

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

Answer 3

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

OR

#footer {
 position:fixed;
    bottom:0;
  width:100%;
  clear:both; 
}

Answer 4

最终正确答案：http://jsfiddle.net/L9tqk/11/

 change `position: absolute;` to `position: relative;` and
    overflow: hidden; add in your `#content #trans`

Answer 5

试试这个

#footer {
  position:absolute;
  width:100%;
  clear:both;
  bottom:0;
}

Answer 6

将此Css位置更改为相对，并且可以正常工作

#content #trans {
    background: rgba(0,0,0,0.3);
    width:100%;
    height:auto;
    position:relative;  
    top:0px;  
    left:0px;  
    z-index:-1;
    border-radius:5px;
    color:Red;
   }

更新的小提琴

http://jsfiddle.net/L9tqk/9/

Answer 7

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

这适用于几乎所有的网络浏览器。它仍然是固定的，所有其他内容都将落后于它。

页脚的位置无法修复

7 个答案: