Asked Apr 5th, 1:36 PM 117 0 3
  • 117 0 3
+1

Fixed Footer trong CSS

Share
  • 117 0 3

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 ANSWERS


Answered Apr 8th, 1:57 AM
+3

bạn có thể thử thay đổi phần position của footer từ fixed thành như sau:

position: sticky;
Share
Anh Tran @thanh_tuan
Apr 8th, 2:22 PM

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é.

+1
| Reply
Share
Viet Hung @gattadesmond
Apr 10th, 10:13 AM

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.

0
| Reply
Share
Apr 10th, 1:07 PM

Bạn có thể set min-height cho body là 100vh nhé

0
| Reply
Share
Answered Apr 8th, 4:48 AM
+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;
  }
}

Share
Anh Tran @thanh_tuan
Apr 8th, 2:22 PM

tks bạn nhé

0
| Reply
Share
Answered Apr 6th, 1:55 AM
0

mong mọi người giúp đỡ mình

Share
Apr 6th, 3:47 PM

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;
  }
}
0
| Reply
Share
Anh Tran @thanh_tuan
Apr 7th, 8:35 AM

@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 đó.

0
| Reply
Share
Apr 7th, 3:30 PM

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);
});
0
| Reply
Share
Apr 8th, 4:47 AM
Anh Tran @thanh_tuan
Apr 8th, 2:23 PM

@nhan1303 tks bạn nhé

0
| Reply
Share