Cách căn chỉnh div xuống cuối trang, không phải dưới cùng của màn hình

Question

Tôi muốn sắp xếp một div vào cuối trang, chứ không phải ở cuối màn hình. Khi tôi làm điều này:

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

, div được đặt ở phần dưới cùng của màn hình. Khi trang của tôi là dài, tôi phải di chuyển xuống và div mà nên có được ở phía dưới, trôi nổi ở đâu đó ở giữa.

Có thể có một giải pháp đơn giản cho điều này, nhưng tôi chỉ không nhìn thấy nó.

Dưới đây là HTML của tôi:

<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> 

Tôi cũng đã thêm một hình ảnh nhỏ để minh họa cho những gì tôi có nghĩa là:

Các div màu đỏ là div xúc.

Chỉnh sửa: Tôi đã tìm thấy giải pháp với jQuery và CSS. Đây có thể không phải là giải pháp tốt nhất, nhưng hey, nó hoạt động.

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

Vị trí của yếu tố vị trí absolute bạn phụ thuộc vào tổ tiên phần tử đầu tiên, mà không được vị trí static (đó là mặc định, vì vậy bạn phải đặt nó thành relative (hoặc absolute)).

Vì vậy, hãy đảm bảo rằng vùng chứa #left kèm theo của bạn có 100% tài liệu-heigth và position:relative và mọi thứ đều tốt.

Answer 2

Bạn có thể muốn xem các cột có độ cao bằng nhau: http://css-tricks.com/fluid-width-equal-height-columns/.

Trong trường hợp đơn giản này có thể đủ (Tôi giả định rằng cột #left bạn nổi trái và content cột nổi đúng và không có yếu tố wrapper khác, chỉ cần body):

body { 
    position:relative; 
} 

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

Đừng quên thêm phần tử rõ ràng hơn <div style="clear:both"></div> vào cuối số body của bạn.

Answer 3

Bạn có thể định vị tuyệt đối số div của mình tại chỗ. Kỹ thuật này đòi hỏi một yếu tố #wrapper, mà tôi không phải là một fan hâm mộ, nhưng hey, bạn phải làm watcha phải làm.

Trong ví dụ này, tôi đã xóa hoàn toàn #leftdiv vì nó chỉ được yêu cầu cho bố cục được nhắm mục tiêu và không còn cần thiết nữa.

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 

Một điểm tốt của kỹ thuật này là nó mang đến cho bạn HTML sạch hơn. Tôi tin rằng sẽ dễ dàng hơn khi tạo phiên bản di động cho phiên bản của bạn nếu cần.

The jsfiddle

suy nghĩ khác: Yếu tố #wrapper có thể dễ dàng được gỡ bỏ trong lợi của bạn body yếu tố, đó là một bước tiến lớn đối với HTML ngữ nghĩa. Check this out!

Answer 4

Tôi khuyên bạn nên đặt div màu đỏ bên trong div dài bên phải và ở cuối nó. Sau đó, sử dụng position: relative và lề trái tiêu cực trên div màu đỏ để đẩy nó sang bên trái. Bằng cách này, khi div bên phải của bạn mở rộng, div màu đỏ của bạn luôn luôn ở dưới cùng của nó.