Ensure that the footer is on bottom of the page if the page has a short height [duplicate]

Answer 1

actually , a very possible duplicate of Fill remaining vertical space with CSS using display:flex

You may take a look at flex and flex-grow.

body {
display:flex;
flex-flow:column;
min-height:100vh;
margin:0;
}
#main-container {
flex:1;
}
#footer {}


/* = */
#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }

Header

Hello

World


Bye-bye.

usefull link : https://css-tricks.com/snippets/css/a-guide-to-flexbox/