Chân trang CSS không dính vào cuối trang

Question

Tôi đang gặp một số khó khăn trong việc thiết lập chân trang dính trong bố cục css của tôi. Tôi đã cố gắng đi với ý tưởng từ http://www.cssstickyfooter.com/ nhưng chân trang không nằm ở cuối trang nếu nội dung trong div không đủ cao.

Các tập tin css:

* { 
margin:0; 
padding:0; 
} 

body { 
height:100%; 
margin:0px; 
padding:0px; 
} 

#wrap { 
min-height: 100%; 
} 

#container { 
overflow:auto; 
padding-bottom: 150px; 
text-align:left; 
width:800px; 
margin:auto; 
} 

#header { 
height:240px; 
margin-top:20px; 
} 

#navigation { 
float:left; 
width:800px; 
margin-top:20px; 
} 

#content-container { 
float:left; 
width: 800px; 
} 

#left { 
clear:left; 
float:left: 
width:480px; 
height: auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#right { 
float:right; 
width:275px; 
height:auto; 
margin: 20px 0px 20px 0px; 
padding: 20px 10px 20px 10px; 
} 

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

#columns { 
width:800px; 
height:150px; 
margin:auto; 
} 

#colleft { 
float:left; 
width:400px; 
height:150px; 
} 

#colright { 
float:right; 
position:relative; 
width:260px; 
height:150px; 
} 

Các tập tin html:

<div id="wrap"> 

    <div id="container"> 

     <div id="header"></div> 

     <div id="navigation"> 

      <div id="lang"></div> 

     </div> 

     <div id="content-container"> 

      <div id="left"></div> 

      <div id="right"></div> 

     </div> 

    </div> 

    <div id="footer"> 

     <div id="columns"> 

      <div id="colleft"></div> 

      <div id="colright"></div> 

     </div> 
</div> 

Answer 1

Tôi tin rằng bạn đang thiếu

html { height: 100%; }

từ CSS của bạn.

Answer 2

Bạn đã cân nhắc sử dụng vị trí: đã sửa chưa?

#footer { position: fixed; bottom: 0px; height:150px; } 

Lý do ví dụ của bạn không hoạt động là vì #footer của bạn là bên trong #wrap, sử dụng CSS cáC#footer phải bên ngoài bọc, vì nó là bọc được thiết lập min-height đến 100% và #footer đang được kéo lên trên bằng cách sử dụng lề âm.

Thẻ html cũng cần chiều cao 100% để hoạt động.

Vì vậy, để tóm tắt lại, #footer không thể lồng nhau và html cần chiều cao: 100%;

Ví dụ ở đây --- http://jsfiddle.net/CK6nt/

Hy vọng rằng sẽ giúp! Laurie

Answer 3

Trong lớp chân của bạn:

#footer { 
position: relative; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Thay đổi position: relative; để position:fixed vì vậy lớp nên xem xét như thế này:

#footer { 
position: fixed; 
clear:both; 
height:150px; 
margin-top: -150px; 
} 

Answer 4

Có thể bạn cần phải chọn cách tiếp cận khác. Tôi sử dụng phương pháp này để dính chân trang vào cuối Stick Footer to bottom with help of CSS3. Nó chỉ hoạt động trong các trình duyệt hiện đại) Đối với các công trình khác "sự xuống cấp duyên dáng", nội dung vẫn có thể truy cập được.