Giữ chân với chiều cao biến ở phía dưới

Question

tôi cần phải giữ một chân ở phía dưới, nhưng chiều cao của nó có thể thay đổi các giải pháp để chính không phù hợp với tôi ...

ví dụ về những gì tôi không thể làm: http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

Bất kỳ ai có giải pháp cho chân trang linh hoạt? Cảm ơn

Answer 1

2014 CẬP NHẬT: Cách hiện đại để giải quyết vấn đề bố trí này là để use the flexbox CSS model. Nó được hỗ trợ bởi tất cả các trình duyệt chính và IE11 +.

---

Dưới đây là một giải pháp cho chân dính cao linh hoạt sử dụng div s với display: table-row:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 
.content { 
 
    display: table-row; 
 
    /* height is dynamic, and will expand... */ 
 
    height: 100%; 
 
    /* ...as content is added (won't scroll) */ 
 
    background: turquoise; 
 
} 
 
.footer { 
 
    display: table-row; 
 
    background: lightgray; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <h2>Content</h2> 
 
    </div> 
 
    <div class="footer"> 
 
    <h3>Sticky footer</h3> 
 
    <p>Footer of variable height</p> 
 
    </div> 
 
</div>

Những gì cần phải được lưu ý là CSS được thiết kế để bố trí tài liệu , không phải màn hình ứng dụng web. Hiển thị CSS: thuộc tính bảng rất hợp lệ và được hỗ trợ trong all major browsers. Điều này không giống như việc sử dụng cấu trúc bảng để bố cục.

Answer 2

Tôi nghĩ tôi hiểu bạn là gì.

Bạn cần phải loại bỏ chiều cao css và thay thế bằng padding-top và bottom đệm nếu bạn vẫn còn cái khoảng cách ..

Đối với ví dụ

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #6CF; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

Answer 3

#wrapper, #content, #footer { 
    width:100%; 
    height:100%; 
    position: relative; 
} 


<div id="wrapper"> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>