How to adjust html body height when there is only few body content

Question

Thanks for the help in advance. I have developed an html webpage, the html structure is like

<header></header>
<main>
  Content
</main>
<footer></footer>

The issue is that i have only few content inside the main tag because of this some white space after the footer. I want to avoid this.

The screenshot of my issue

I tried the below code but not working.Can anyone help me with this

@media screen and (min-height:1200px) {
 footer{
    position:relative;
    bottom:0;
  }
}