Yêu cầu thg 4 5, 2019 1:36 CH 1018 0 3
  • 1018 0 3
+1

Fixed Footer trong CSS

Chia sẻ
  • 1018 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 CÂU TRẢ LỜI


Đã trả lời thg 4 8, 2019 1:57 SA
+3

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

position: sticky;
Chia sẻ
Avatar Anh Tran @thanh_tuan
thg 4 8, 2019 2:22 CH

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

Avatar Viet Hung @gattadesmond
thg 4 10, 2019 10:13 SA

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.

thg 4 10, 2019 1:07 CH

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

Đã trả lời thg 4 8, 2019 4:48 SA
+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;
  }
}

Chia sẻ
Avatar Anh Tran @thanh_tuan
thg 4 8, 2019 2:22 CH

tks bạn nhé

Đã trả lời thg 4 6, 2019 1:55 SA
0

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

Chia sẻ
thg 4 6, 2019 3:47 CH

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;
  }
}
Avatar Anh Tran @thanh_tuan
thg 4 7, 2019 8:35 SA

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

thg 4 7, 2019 3:30 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);
});
thg 4 8, 2019 4:47 SA
Avatar Anh Tran @thanh_tuan
thg 4 8, 2019 2:23 CH

@nhan1303 tks bạn nhé

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí