[css] Footer luôn nằm dưới bottom

Đôi khi ta hay bắt gặp desgin có phần footer luôn nằm dưới bottom
Và vấn đề chúng ta thường gặp ở đây đó là khi view nó ở dạng landscape (khi xoay điện thoại nằm ngang)
có 1 giải pháp cho việc này đó là sử dụng viewport

.container{
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
 width: 100%; 
}
.footer{
 background: #0066cc;
 position: absolute;
 bottom: 0;
 width: 100%; 
}

Nhược điểm:
Khi không có đủ nội dung cho trang của mình, footer sẽ rời khỏi vị trí và sẽ có khoảng trắng ở dưới nhưng khi có đủ nội dung cho một trang thì footer sẽ luôn ở dưới cùng.