+1
Fixed Footer trong CSS
Mình có ví dụ này: https://codepen.io/anon/pen/rbLNyY
Trong đó mình muốn set Fixed cho phần Footer nhưng nó lại bị đè nên nội dung của phần Conten.
Cái khó ở đây là thuộc tính height của phần Footer sẽ thay đổi khi màn hình co lại nên mình sẽ không thể áp dụng vào css để trừ đi chiều cao của phần Footer một cách linh hoạt được ?
Mình hỏi thử xem liệu có cách nào hay hơn không.
Cám ơn mọi người đã đọc bài viết của mình !
Add a comment
3 ANSWERS
Chả hiểu lúc trước viết kiểu gì mà nó không ra mặc dù ban đầu mình cũng dùng sticky . Giờ viết lại vào thì chạy ngon. tks bạn nhé.
Cách này mình làm thì nếu như nội dung ít thì nó sẽ tràn lên, không còn fixed dưới nữa. Bạn có ví dụ cho mình xem với.
Bạn có thể set min-height cho body là 100vh nhé
+2
Thử cách này nhé bạn 
https://codepen.io/xuandinhgl/pen/EJgLxR
html,body{
margin: 0;
padding: 0
}
body{
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
background: #595959;
top: 0;
width: 100%;
height: 90px;
}
.content{
border:solid ;
padding: 15px;
overflow-y: auto;
}
.footer {
width: 100%;
background-color: blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
.layout{
height: 70px;
width: 45%;
}
.layout-1{
background: red;
}
.layout-2{
background: green;
}
@media only screen and (max-width: 600px) {
.layout{
width: 100%;
margin-bottom:15px;
}
}
tks bạn nhé
Bạn thử change 2 chỗ này xem thử.
.content{
border:solid ;
padding: 15px;
padding-bottom: 105px;
}
@media only screen and (max-width: 600px) {
.layout{
width: 100%;
margin-bottom:15px;
}
.content {
padding-bottom: 205px;
}
}
@nhan1303 tks bạn, cách này mình cũng nghĩ đến nhưng thực sự là mình không muốn dùng đến media-screen vì thực tế khi co lại , chiều cao của Footer thực tế sẽ thay đổi khá nhiều lần, với lại con số 205px bạn phải đo xem nó bằng bao nhiêu - mình không muốn dùng cách đó.
chẳng lẻ footer bạn style kiểu ratio box hay sao ?? Nếu vậy bạn dùng js thôi :
$(window).resize(function() {
var heightFooter = $('.footer').outerHeight(true);
var paddingBottomContent = (heightFooter + 15)
$('.content').css('padding-bottom', paddingBottomContent);
});
This comment has been deleted
