Pure sticky footer

Recently, I often meet different examples of «sticky footer» in a vertical configuration page. In this post, I wanted to offer another example of solving this problem.

The fact that there are a popular solution «sticky footer» of pages based on the wrap header and content in a single unit. Construction of the following type:


	<body>
		<div class="wrapper">
			<header class="header">...</header>
			<main class="main">...</main>
		</div>
		<footer class="footer">...</footer>
	</body>


	html, body{
		height: 100%;
	}

	.wrapper{
  		min-height: 100%;
  		margin-bottom: -150px;
  	}

	.wrapper::after{
		content: " ";
		display: block;
		height: 150px;
	}

	.footer{
		height: 150px;
	}

Everything works fine, but looking at the final result, in my opinion, the code loses easy readability, and such construction spoils the overall look.

Recent years are, in my opinion cleaner solution that preserves the semantics eliminates the extra HTML tags and unnecessary styles:


	<body>
		<header class="header">...</header>
		<main class="main">...</main>
		<footer class="footer">...</footer>
	</body>


	html{
		position: relative;
		min-height: 100%;
	}

	body{
  		margin-bottom: 150px; 
	}

	.footer{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 150px;
	}

At first sight it may seem that the absolute position of the footer can play not good joke in further development, but to use this method for a long time in my practice has not yet been misfiring by this method. Also no problem with a fixed cap, is a cross-browser solution and support for older browsers.

If the footer has dynamic content, and you will not in the future to maintain their code, or you just want to simplify your life, offer to write a simple script that would calculate the real height of the footer and put the value in the styles of the footer and bottom padding of the body of the document.