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

Answer 1

Here you go

#footer {  position: absolute; bottom: 0; width: 100%; height: 2rem; }
#main-container { padding-bottom: 2rem; }

<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

Answer 2

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; }

<div id="header">Header</div>
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

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