Question

我在SO中浏览了同样的问题，但没有一个能够很好地兼容[Cross Browser兼容] 所以，我正在寻找用jQuery解决同样的工作我想将div放在HTML页面的底部，而不是放在屏幕的底部。

我到目前为止只尝试使用CSS

clear: both;

min-height: 6%;

position: fixed;

bottom: 0;

Edit
我的CSS

html, body {

margin: 0px;

padding: 0px;

height: 100%;

}

#footer {

 width: 100%;

 height: 6%;

 position: absolute;

 bottom:0px;
 left:0px;
}

#content {

float: left;

width: 59.5%;

height: 83%;

position:relative;

}

#news {
 z-index:2;
}

<html>
 <div id="content">
  <div id="news"> </div>
 </div>
 <div id="footer"></div>
<html>

Answer 1

我相信你毕竟想要粘性页脚。

jsfiddle demo

它使用this sticky footer。

基本思路是使用粘性页脚或基本上任何Sticky footer，然后为#wrap着色，因为它将垂直覆盖整个视口

Answer 2

将height和body的{{1}}设置为html，然后为包含100%和position: relative的整个正文创建一个包装器，当你在这个包装器中有元素时，它将对齐到底部。

height:100%

使用CSS：

<html
    <body>
        <div id="body-wrapper">
            <div id="bottom"></div>
        </div>
    </body>
</html>

以下是没有包装器的情况：http://jsfiddle.net/Cj4c2/1/

这里有一个包装器：http://jsfiddle.net/CPSt6/

Answer 3

你应该使用position：absolute;底部：0px;这样div应该总是在包装元素的底部。包装元素应该具有position：relative;

Answer 4

请参阅css文件：

具有固定位置的元素相对于浏览器窗口定位。绝对位置元素相对于具有静态位置的第一父元素定位。如果没有找到这样的元素，则包含块是

src：http://www.w3schools.com/css/css_positioning.asp

所以你应该使用position：absolute。

强制div去底部

4 个答案: