Fix Footer Notification For Free

Set margin on the footer Because you set the Body ? the footer's parent element ? to Flex, you can set the top margin on the footer element to Auto. This makes the footer push away from the content above, causing the footer to stick to the bottom of the page.

Using Flexbox in CSS we can fix it very easily with following steps. First set the min-height of body to 100vh.Set the body display to flex display: flex; and flex-direction to column flex-direction: column; . Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window. Thank you!

Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .

If you want to keep the footer at the bottom of the text (sticky footer), but keep it from always staying at the bottom of the screen, you can use: position: relative; (keeps the footer in relation to the content of the page, not the view port) and clear: both; (will keep the footer from riding up on other content).

The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.

Quick answer: Add ?display:flex; flex-direction:column; min-height:100vh;? to body or appropriate layout body element, then add ?flex:1;? to content wrapper element/section.