Đô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.
