如何将div与页面底部对齐,而不是屏幕底部

Question

我想将div对齐到PAGE的底部,而不是屏幕的底部.当我这样做:

#contact-block{
position: absolute; 
    bottom: 0; left: 0; 
}

,div放在屏幕的底部区域.当我的页面很长时,我必须向下滚动,应该在底部的div漂浮在中间的某个地方.

可能有一个简单的解决方案,但我只是没有看到它.

这是我的HTML:

<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
  <ul> 
  </ul>
 </div>

 <div id="contact-block">
 <span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>

我还添加了一个小图片来说明我的意思:

红色div是联系div.

编辑:我找到了一个jQuery和CSS的解决方案.这可能不是最好的解决方案,但是嘿,它有效.

jQuery的:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);

CSS:

#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}

Answer 1

你的位置absolute取决于第一个祖先元素，该元素未定位static（这是默认值，因此您必须将其显式设置为relative(或absolute) ）。

因此，请确保您的封闭#left容器具有 100% 文档高度和position:relative，并且一切正常。