如何将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

您可以绝对定位div到位。这种技术需要一个#wrapper元素，我不是它的粉丝，但是，嘿，你必须要做的事情。

在此示例中，我完全删除了#left div，因为它仅用于布局目的，不再需要。

HTML：

<div id="wrapper">
    <div id="submenu">This is services</div>
    <div id="contact-block">This is contact</div>
    <div id="content">This is content</div>
</div>​

CSS：

#wrapper { 
    position: relative; 
    width: 960px; 
}

#submenu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 320px; 
    height: 320px; 
}

#contact-block { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 320px; 
    height: 160px; 
}

#content { 
    position: relative; 
    left: 320px; 
    right: 0; 
    top: 0; 
    width: 640px; 
    height: 640px; 
}

//#content position is relative for the #wrapper to stretch. 
//The left property is equal to the width of the #submenu or #contact-block element

这项技术的一个优点是它可以为您提供更清晰的HTML。我相信如果需要，可以更容易制作您的版本的移动版本。

The jsfiddle

其他想法： 可以轻松删除#wrapper元素，以支持您body元素，这是迈向语义HTML的重要一步。 Check this out!

Answer 2

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

因此，请确保封闭的#left容器具有100％的文档高度和position:relative，一切都很顺利。

Answer 3

您可能希望查看相等高度的列：http://css-tricks.com/fluid-width-equal-height-columns/。

在简单的情况下，这可能已经足够了（我假设您的#left列向左浮动而content列浮动正确且没有其他包装元素，只有body）：< / p>

body {
  position:relative;
}

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

不要忘记在<div style="clear:both"></div>的底部添加更清晰的元素body。

Answer 4

我建议将红色div放在右侧长div中并放在它的末尾。然后在红色div上使用position: relative和负左边距将其向左推。这样，当您的右侧div扩展时，您的红色div始终位于其底部。