Css to Make HTML Page Footer Stay At Bottom of the Page With a Minimum Height, But Not Overlap the Page

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.layout-main {
  flex-grow: 1;
}

.layout-footer {
  background: gold;
}

<main class="layout-main">
  Some short Main content
</main>
<footer class="layout-footer">
  I will stay ideally in the bottom when not enough content in Main
</footer>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

1. Have a <div> with class="wrapper" for your content.

2. Right before the closing </div> of the wrapper place the
   <div class="push"></div>.

3. Right after the closing </div> of the wrapper place the
   <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

How to keep footer at bottom of screen

What you’re looking for is the CSS Sticky Footer.

* {  margin: 0;  padding: 0;}
html,body {  height: 100%;}
#wrap {  min-height: 100%;}
#main {  overflow: auto;  padding-bottom: 180px;  /* must be same height as the footer */}
#footer {  position: relative;  margin-top: -180px;  /* negative value of footer height */  height: 180px;  clear: both;  background-color: red;}

/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {  content: "";  height: 100%;  float: left;  width: 0;  margin-top: -32767px;  /* thank you Erik J - negate effect of float*/}

<div id="wrap">  <div id="main"></div></div>
<div id="footer"></div>

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}