html – How to place footer at the end of the entire page?

Question:

I want the footer to always stay at the end of the entire page, regardless of the content, when I put this code:

.footer{
    position: relative;
    left: 0;
    bottom: 0;  
    display: table;
    width: 100%;
    height: 13vh;
    background-color: #000;
    color:#fff;
    text-align: center;
}

the footer stays at the end but only on the pages where they have content, if there is a page that does not have content the footer stays on top.

and when I use this code the footer in the pages without content stays at the end but in those with content it stays at the bottom of the screen but not of the page:

.footer{
    position: absolute;
    left: 0;
    bottom: 0;  
    display: table;
    width: 100%;
    height: 13vh;
    background-color: #000;
    color:#fff;
    text-align: center;
}

Answer:

To have the footer behavior always at the bottom of the page, you must have the body with a min-height of 100% of the viewport and you can use a trick like putting the flex and auto margin-top so that it is always at the bottom.

body{
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
  display: table;
  width: 100%;
  height: 13vh;
  background-color: #000;
  color:#fff;
  text-align: center;

}
<body>
    <div class="contenido">
        este es mi contenido
    </div>
    <footer class="footer"> 
      Este es mi footer
    </footer>
<body>
Post Views: 2
Scroll to Top