Pin the footer of an html page and follow the page content

Question

I need to pin the tag footer at the end of the html page, but when the content exceeds the page by tag footer should follow the content and not be fixed.

See the CSS code is the HTML code I’m using for this.

    header {
        min-height: 55px; /* original era 255px mudei para caber no snippet */
        background-color: blue;
    }
    article {
        padding-bottom: 60px; 
        width: 900px; 
        margin: 0 auto;
    }
    footer {
        position: absolute; 
        bottom: 0px; 
        width: 100%; 
        height: 60px; 
        background-color: green;
    }

<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>    
</article>

<footer></footer>
</body>
</html>

The problem is that the tag footer with the property position with the value fixed leaves the footer fixed.

When I change the property position for absolute the tag footer is floating and does not follow the content.

Answer 1

To browsers recent you can add this to your CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

According to the creator of the solution, functiona with: IE8+, Chrome / Safari, Firefox and Opera.

The biggest advantage of this solution over the others is that you do not need to create Wrappers around its contents. It uses its own body as wrapper.

Example: Com muito conteúdo - Sem muito conteúdo

^{(The same code was used for the two examples, only the content that changes.)}

Answer 2

Da to do using flex in the body.

First you need to define the body with display: flex, then place the order as column, so that the "orientation" of the grid is vertical (more or less like the standard behavior of divs). Then in the main that will receive the content you put flex-grow: 1; and puts position:sticky in nav for it to stay fixed at the top. Thus the main will always occupy all available space, "pushing" the footer always at the bottom of the page regardless of the amount of content.

See the code used to get the image result above:

Exipa also as "Página toda" to see better the result!

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	flex-direction: column;
	background-color: #ddd;
}
nav, 
footer {
	width: 100%;
	min-height: 50px;
	background-color: #f00;
	text-align: center;
	color: #ddd;
}
nav {
	position: sticky;
	top: 0;
}
main {
	width: 100%;
	background-color: turquoise;
	flex-grow: 1;
}

<nav>NAV</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur voluptates reprehenderit magni molestias iure unde id minima voluptatem laudantium ipsum. Nam reprehenderit iusto consectetur ipsum natus doloremque laudantium illum quod delectus perferendis! Quam explicabo laudantium suscipit reprehenderit harum quo nostrum porro fugit natus. Eius sequi odit sunt, aut eveniet similique dicta mollitia reprehenderit incidunt, molestiae quod amet esse facere vero perspiciatis dignissimos voluptatum eligendi laborum dolorum asperiores inventore, ipsum est. Obcaecati dolores perspiciatis dignissimos. Consequuntur soluta quaerat, asperiores sed earum non impedit. Tempora dicta dolorum quas id asperiores laboriosam delectus velit perferendis veniam blanditiis ea exercitationem ullam, ab consequuntur incidunt ipsa est voluptate suscipit cumque non ipsum praesentium minima aliquam. Tempore ratione dolore aut saepe sint. Eos vel facilis minima nostruoloremque reprehenderit nisi sunt inventore maxime quisquam quaerat, totam perspiciatis. Quidem in sint debitis perspiciatis labore, eaque nam quis doloremque blanditiis ipsum architecto temporibus sunt tempore voluptates? Voluptatem, dolorum unde ut facilis quasi eligendi officia earum in. Nemo impedit pariatur itaque soluta non minus. Minima vel maiores aliquid officiis accusamus optio excepturi praesentium in doloremque, similique necessitatibus! Iure asperiores necess nemo ipsa laborum velit optio 
</main>
<footer>FOOTER</footer>

OBS: The Flex works from IE10 up https://caniuse.com/#search=flex aténde

Answer 3

A simple and responsive solution would be like this.

footer{
position: relative;
background-color: red;
width:100%;
height:48px;
left:0;
bottom:0;
}

<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p> 
</article>

<footer></footer>
</body>
</html>

Answer 4

In order for Case to have little content on the page not to scroll to follow the content use {left: 0; bottom: 0;}

footer{
position: relative;
background-color: red;
width:100%;
height:48px;
}

<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>    
</article>

<footer></footer>
</body>
</html>