0

I am working on footers for an html page and wanted an implementation of something that keeps the footer below page level when the main content takes up less space than the page height. If the content takes up more space than the page height, then I want the footer to become just like a regular element and expand(not stick below the page anymore). I have a example below.

Red: header Blue: content Green: Footer

When content is minimal:

enter image description here

Since the content(blue) is takes up minimal space, I want to keep the footer right below the page so when the user scrolls, it starts to show.

When content is more:

Now that the blue takes up more than 1 page, I want the footer to get pushed down with the content so that it doesn't overlap or mess up the content.

enter image description here

Right now, I have code that can satisfy the first case but ALWAYS stays directly below the page. This means that it overlaps the content if the content goes past 1 page of length. I am new to HTML so if anyone has suggestions that would be great!

itsMeMoriarty
  • 125
  • 1
  • 1
  • 9
  • You can follow [this](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) – Debsmita Paul Feb 09 '21 at 05:27
  • 1
    Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) – Manas Khandelwal Feb 09 '21 at 05:29

0 Answers0