"Automatic" footer [duplicate]

Navigation
1

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

    
asked by anonymous 04.12.2017 / 19:50

1 answer

2

Same as I suggested in Footer always at the bottom of the page , just change the selectors for your elements.

You will have to combine position: relative with absolute , it's not obscure, just that the element "father" (in my case I created one more element, .main ) is in relative , it would be something like:

  

I added a button for you to test that the footer will accompany 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>
    
04.12.2017 / 20:06
Calculate two times in a variable in the batch Background image