"Automatic" footer

Question

I’m making a website to index links. There are times when the result occupies less than half the page, and times it takes up a huge scroll. I need a footer that in little content is stuck at the bottom of the screen (bottom: 0;) but if there is content scroll, stay at the bottom (can not be used bottom: 0;) (an example of this is the google search system or shopping websites). If anyone knows how to do this, please help. It has been researched, but nothing has been found.

Answer 1

Identical to what I suggested in Footer always at the bottom of the page, just change the selectors for your elements.

You’ll have to match position: relative with absolute, is not at all obscure, it is enough that the element "father" (in your case I created one more element, the .main) is in relative, would look something like:

I added a button for you to test that the footer will follow the content if the scrollbar appears

var content = document.getElementById("content");
var adicionar = document.getElementById("adicionar");

adicionar.onclick = function () {
    var novo = document.createElement("p");
    novo.textContent = "Foo Bar Baz, " + (new Date());
    content.appendChild(novo);
};

html, body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

.main {
    position: relative; /*faz a mágina :)*/
    min-height: 100%; /* define a altura minima*/
    background: #fcfcfc;
}

.main > footer {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}

<div class="main">
    <header></header>
    <div id="content">
         Todo conteúdo vai aqui<br>
         <button id="adicionar">Adicionar conteudo</button>
    </div>
    <footer>Rodapé</footer>
</div>