Làm hình ảnh chân trang ở cuối trình duyệt web hoặc trang

Question

Tôi biết điều này đã được hỏi rất nhiều lần trong quá khứ nhưng đối với cuộc sống của tôi, tôi dường như không nhận được bất kỳ giải pháp nào khác để làm việc.

Điều tôi đang cố gắng làm là để chân trang (là hình ảnh lặp lại trên toàn bộ chiều rộng của trang) để dính vào cuối trình duyệt khi không có đủ nội dung để tự động đẩy nó đến phần dưới cùng của trang và khi có đủ nội dung để đẩy nó xuống phía dưới nó chỉ làm như vậy. Một ví dụ là một tại http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm mà không chính xác những gì tôi muốn nhưng tôi không thể làm việc, hoặc.

Mã mà tôi hiện đã triển khai làm cho chân trang dính vào một phần nhất định của trang có văn bản đi theo nó. Bạn có thể nhìn thấy nó tại sourcectrl.co.uk nhưng nó không nhiều để xem xét. Heres mã cho niềm vui của bạn xem.

html, body { 
font: 100% Arial, Helvetica, sans-serif; 
height: 100%; 
color: #597347; 
margin: 0; 
padding: 0; 
background: #573909; 
} 

header { 
    display: block; 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 66px; 
    background: url(../images/FillerPage_01.gif) repeat-x left bottom; 
} 

section { 
    width: 940px; 
    margin: 0 auto; 
    font-size: 1.4em; 
    overflow: auto; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: 87px; 
    position: relative; 
    padding-bottom: 90px; 
} 

footer { 
    display:block; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 87px; 
    background: url(../images/FillerPage_08.gif) repeat-x left bottom; 
} 

Xin lỗi nếu có vẻ lộn xộn! Tôi chỉ muốn biết nếu tôi đang đi đúng hướng hay có điều gì đó mà tôi không nhận được? Oh yeah tôi đang cố gắng để làm tất cả điều này với đánh dấu 5 html đó là lý do tại sao không có #footer và như thế (có thể đây là lý do tại sao không có giải pháp nào hoạt động?).

Nếu có ai có thể cho tôi bất kỳ sự trợ giúp hoặc hướng dẫn nào, tôi sẽ rất biết ơn.

Answer 1

Đây là nguồn gốc mà đã giúp tôi đạt được một bố cục như:

http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

Answer 2

Tôi tin rằng mã bạn đang tìm kiếm là đây:

http://www.themaninblue.com/writing/perspective/2005/08/29/

tôi thực hiện điều này chỉ là bây giờ trên trang web của tôi và nó hoạt động rất tốt!

đó là một lúc kể từ khi bạn đặt câu hỏi nhưng hy vọng điều này sẽ hữu ích!

Answer 3

Đặt mọi thứ trong chính trong một Wrapper và sử dụng đoạn mã sau:

html, body, form 
{ 
    height: 100%; 
} 

#wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different) 
} 

#footer, .push 
{ 
    height: 60px; (This is just the height of MY footer, change this to whatever size your footer is) 
}