如何將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。 我相信，如有需要，可以更輕松地制作移動版本的版本。

jsfiddle

額外的想法： #wrapper元素可以很容易地被刪除，而有利於您的body元素，這是朝語義HTML邁出的重要一步。 看一下這個！

Answer 2

absolute位置元素的位置取決於第一個祖先元素，該元素的位置不是static （這是默認值，因此您必須將其顯式設置為relative （或absolute ））。

因此，請確保封閉的#left容器具有100％document-heigth和position:relative ，並且一切都很好。

Answer 3

我建議將紅色div放在正確的long div內，並在其末尾。 然后在紅色div上使用position: relative和負左邊距將其向左推出。 這樣，隨着右div的擴展，紅色div始終停留在其底部。