0

I'm using mediaquery and when i start up my webpage the footer is at the bottom and if i change the size of the window the footer stays at the bottom. But if i start scrolling the footer moves to and scrolls up, i want it to stay at the bottom at all times

My CSS looks like this:

.footer{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(3, 3, 3, 0.8);
}


@media (max-width: 800px) {
.footer{
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 100px;
}

i have tried different position propertys

ems
  • 3
  • 3
  • could you please provide more information , or if it's possible make codesandbox for it – Ali Sattarzadeh Jan 31 '23 at 13:30
  • 1
    `@media only screen and (max-width: 800px)` that is the syntax if I remember correctly – Vinayak Vohra Jan 31 '23 at 13:33
  • if your footer is a direct child of body, `body { min-height:100vh}` should work. See option 3 here https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b – Minsky Jan 31 '23 at 13:34

0 Answers0