Kevin Powell - Community•14mo ago

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

Felix

CodePen

eYPdqqJ

...

7 Replies

b1mind•14mo ago

https://youtu.be/rxnX1jdoI6c

Kevin Powell

YouTube

5 common beginner CSS mistakes

I often see beginners making the same mistakes over and over again, so in this video I take a look at some common issues and give some advice on how I think things could be improved. 🔗 Links ✅ Live Server VS Code extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ✅ Flexbox or Grid - How to decide? https://yout...

b1mind•14mo ago

make sure you watch this I prefer Grid for pushed footers https://codepen.io/b1mind/pen/PojdyQz either way you are pulling lots of content out of the flow, your footer should be at the bottom without anything.

d0kefish•14mo ago

So what you are saying is that my clearly perfectly planned CSS/HTML (mess) might need beginner advice? To make it more confusing, if I select the grid that 'wrap's it, and set justify content, i can get the header to snap to the bottom.

glutonium•14mo ago

even people at the professional level do silly mistakes and can have lack of knowledge over certain parts which might as well can be a beginner level thing , so it's nothing to be surprised about. xD

d0kefish•14mo ago

No, it was complete accurate advice, it was the 'many' absolute positions I had set 😄 And Im supernew to HTML / CSS.

glutonium•14mo ago

aaah.. absolute.. i call it the party pooper. try your best not to use position property or margin/padding or transform property to position elements. that's why learn flex and grid combine flex and grid and you'll become INEVITABLE

glutonium•14mo ago

Gaming

Programming

Sticky footer