Làm cách nào để căn chỉnh div ở góc dưới cùng bên phải của trang web ngay cả khi nội dung ít hơn?

Question

Tôi có trang splash cực kỳ đơn giản này tại đây: http://iph0wnz.com

Nó có đồ họa chính ở giữa, sau đó là 'a' của tôi. logo ở góc dưới cùng bên phải. Tôi muốn biểu tượng đó được căn chỉnh ở dưới cùng bên phải của toàn bộ trang , có nghĩa là nếu có nhiều nội dung văn bản trong trang, nó sẽ xuất hiện sau tất cả (tức là nó không di chuột lên trên), nhưng nếu có ít nội dung hơn - như ngay bây giờ - thì nó sẽ được căn chỉnh ở phía dưới cùng của màn hình chứ không phải ngay sau nội dung.

Tôi sẽ cố gắng để đưa ra một ví dụ văn bản như tôi đã thấy trong How to align content of a div to the bottom?:

 
    ----------------------------- 
    | less content, no scroll | 
    |       | 
    |       | 
    |       | 
    |      a. | 
    ----------------------------- (screen height) 

và

 
    ----------------------------- 
    | more content, yes scroll | 
    | the quick brown fox jump- | 
    | ped over the lazy dog an- | 
    | d she sells sea shells on | 
    | the sea shore and some o- | 
    | ther random text is put | (screen height) 
    | here so there is a scroll | 
    | bar because the content | 
    | is too much for one scre- | 
    | en to show. okay, I think | 
    | that is enough.   | 
    |      a. | 
    ----------------------------- 

Ngoài ra câu hỏi khác liên kết ở trên, tôi cũng nhìn How do I force a DIV block to extend to the bottom of a page even if it has no content? nhưng didn rằng 't làm việc cho tôi.

Tôi biết điều này đã chết đơn giản, nhưng tôi chỉ mệt mỏi vì đã thử tất cả các mẹo và thủ thuật tôi có thể tìm thấy.

Ngoài ra, tôi muốn sử dụng phương pháp để đặt biểu tượng trên trang web khi nội dung thực tế đi vào - đó sẽ là một blog.

Lưu ý: Tôi không ngại sử dụng JavaScript và jQuery nếu cần thiết để đạt được hiệu ứng này.

Answer 1

Hãy thử giải pháp này:

* { margin: 0; } 
html, body { height: 100%; } 
/* the bottom margin is the negative value of the footer's height */ 
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; } 
/* .push must be the same height as .footer */ 
.footer, .push { height: 142px; } 

tìm thấy here

EDIT: quá muộn để nhớ làm thế nào để làm điều đó hoặc để giải thích nó, nhưng nếu bạn cần thêm sự giúp đỡ tìm kiếm google cho "chân dính"

Answer 2

Thử sử dụng vị trí: tuyệt đối cùng với màn hình javascripts.height.

Đừng nghĩ rằng đó là giải pháp tốt nhất nhưng nó đã làm việc cho tôi một thời gian trước đây. Có lẽ điều này có thể đạt được thậm chí tốt hơn với jQuery, nhưng tôi đã không thử nó.

Answer 3

Sử dụng JavaScript: có được chiều cao màn hình của bạn, sau đó tự động tạo ra của bạn hoặc bất cứ điều gì, sau đó

position:absolute; 
top:<your document height> 

có nên đặt div của bạn ở phía dưới. Làm tương tự để căn chỉnh đúng. Mặc dù, tôi không thể đảm bảo kết quả trên tất cả các trình duyệt.

Answer 4

Có điều gì đó hơi khác nhưng hữu ích đối với bạn có thể là:

position: fixed; 
bottom: 0; 
right: 0; 

Điều này sẽ giữ cho div của bạn ở góc dưới bên phải của màn hình vào mọi lúc và nội dung sẽ chảy phía sau nó (tương tự như background-attachment: fixed;). Có thể không chính xác những gì bạn đang tìm kiếm, nhưng chắc chắn dễ dàng hơn so với một số các hack khác ra khỏi đó. Lưu ý rằng điều này sẽ không hoạt động trong IE6.

Answer 5

Tôi tình cờ gặp chủ đề này trong khi cố gắng tìm cách căn chỉnh bảng ở phía dưới bên phải của trang web mà tôi đang sử dụng làm nền cho trình duyệt của mình. Tôi đã sử dụng vị trí: tuyệt đối cho bảng, được lồng trong một div, nhưng căn chỉnh nó theo hướng khác.Dưới đây là giao diện CSS:

div 
     text-align:center 

    table 
     position:absolute; 
     top:63%; 
     left:80%; 
     text-align:left; 
     background:rgba(0,0,0,0.4); 

Sau đó, việc chơi với chiều rộng bảng bằng HTML là điều tôi muốn. Tôi hy vọng điều này sẽ giúp bất cứ ai tìm cách làm điều tương tự - và cảm ơn bạn với OP và những người đã dành thời gian để trả lời câu hỏi của OP và do đó của riêng tôi :-)

Đây là liên kết đến screenshot Tôi lấy trình duyệt/máy tính để bàn. Bạn sẽ thấy bảng nằm ở phía dưới bên phải của nền trình duyệt, nhưng không phải trực tiếp trên các cạnh.