0

i have a problem with keeping the footer stick to the bottom i havn't added styles to the footer i just made it the last element in the page and it works fine , until there is a page with small content , then the footer move up like in this picture enter image description here

now what could i do to make the footer stick to bottom when page content has small height.

i tried to add theise styles to the footer :

footer{
position: fixed;
bottom: 0; }

this works fine if the page has small content but if it's not the footer gets displayed on top of the page content like this picture : enter image description here

bottom line is how could i make this footer stick to bottom

Mostafa Sobh
  • 29
  • 1
  • 5
  • calculate footer height and give same padding-bottom to the parent div – Vikas Jadhav Dec 22 '21 at 12:58
  • 1
    You'll have to show some HTML code to get a proper answer, but most likely all you have ot do is set `min-height: 100vh;` on the parent element which holds the footer&main&header elements (probably the ``) – Raxi Dec 22 '21 at 12:58
  • i already added that to the body but the problem still exists – Mostafa Sobh Dec 22 '21 at 14:48

1 Answers1

1

Could you try with

html, body {
  height: 100%;
  margin: 0;
}
Adrián
  • 19
  • 7