html - 如何将 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 元素，我不喜欢它，但是嘿，你必须做 watcha gotta do。

在这个例子中，我完全删除了 #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!