Tạo chân trang CSS hoặc nằm ở cuối cửa sổ trình duyệt hoặc phần cuối của nội dung

Question

Bản sao của this question.

Tôi có trang web hiện tại (jacquelinewhite.co.uk), trên đó có chân trang. Hiện tại chân trang này luôn nằm bên dưới nội dung chính. Tôi đang cố gắng làm cho nó nổi lên dưới cùng của cửa sổ trình duyệt hoặc nếu nội dung lớn hơn cửa sổ, hãy ở cuối phần nội dung.

hiệu quả HTML được cấu trúc như thế này:

<div id="container"> 
    <div id="top_bar"> 
    </div> 
<div id="header"> 
</div> 
<div id="left_menu"> 
</div> 
<div id="right_content"> 
</div> 
<div class="clear"> 
</div> 
<!-- FOOTER AREA --> 
<div id="footer"> 
</div> 
<!-- END FOOTER AREA --> 
</div> 

Tôi đã thử vị trí tuyệt đối, dưới 0, trong đó đặt chân trang ở phía dưới cùng của cửa sổ, nhưng nếu nội dung của cửa sổ lớn thì footer bao gồm nội dung.

Tôi nên sửa lỗi này như thế nào?

Answer 1

Cái này là luôn luôn làm việc tốt cho tôi: CSS Sticky Footer

Answer 2

Kiểm tra lái xe này ...

body { 
    margin:0; 
    padding:0; 
    z-index:0; 
    } 

    #toolbar { 
    background:#ddd; 
    border-top:solid 1px #666; 
    bottom:0; 
    height:15px; 
    padding:5px; 
    position:fixed; 
    width:100%; 
    z-index:1000; 
    } 

Answer 3

Giả sử bạn đang sử dụng chân trang() yếu tố tôi thấy chỉ thêm này để CSS làm việc cho tôi

html, body { 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

footer { 
    margin-top: auto; 
}