12 replies

Sticky footer

Im trying to follow one of Kevins tutorials but I'm yet again, to dense to figure out what I'm doing wrong.
My footer gets sent to the bottom screen, but when i scroll down, it stays:

https://codepen.io/d0kefish/pen/eYPdqqJ

Can anyone say what im doing wrong?

html {
  height: 100%;
}
body {
  margin: 0;
  background-color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;

  min-height: 100%;
  
  display: flex;
  flex-direction: column;
}

.footer {
  background: #24262b; 
  margin-top: auto;
  padding: 70px 0; 
}

html {
  height: 100%;
}
body {
  margin: 0;
  background-color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;

  min-height: 100%;
  
  display: flex;
  flex-direction: column;
}

.footer {
  background: #24262b; 
  margin-top: auto;
  padding: 70px 0; 
}

I realize I most likely are doing something wrong but I cant figure out what..

CodePenFelix

eYPdqqJ

...

KP-C

Kevin Powell - Community•3y ago•

12 replies

d0kefish

Sticky footer

html {
  height: 100%;
}
body {
  margin: 0;
  background-color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;

  min-height: 100%;
  
  display: flex;
  flex-direction: column;
}

.footer {
  background: #24262b; 
  margin-top: auto;
  padding: 70px 0; 
}

html {
  height: 100%;
}
body {
  margin: 0;
  background-color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;

  min-height: 100%;
  
  display: flex;
  flex-direction: column;
}

.footer {
  background: #24262b; 
  margin-top: auto;
  padding: 70px 0; 
}

I realize I most likely are doing something wrong but I cant figure out what..

CodePenFelix

eYPdqqJ

...

Sticky footer

Similar Threads

Sticky footer

Similar Threads

Similar Threads

Similar Threads