Search code examples
htmlcsssticky-footer

Footer at the bottom of the screen without position

This is my code

I want to keep footer at bottom of the screen even if there is less content. and move it down if there is more content.

After doing some research I got may solution using position this is one of the.

However is some cases when the content increases the the footer overlap the content.

Hence I would avoid the position. Using JS will be my last solution.

Solution

  • The easiest solution for this is calc()

    check this demo.

    CSS

    #mainCnt {
  min-height: calc(100% - 90px);
}

    NOTE: This is not supported in IE8 and below