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 !
3 CÂU TRẢ LỜI
bạn có thể thử thay đổi phần position của footer từ fixed thành như sau:
position: sticky;
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é
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);
});