How to Stick Footer to Bottom when Page Content is Less?

Sometimes you may have pages on your site, that have few lines of text or very less content.

In such cases, the footer displays below the content somewhere between the page. That does not give a nice look to the page.

You can stick the footer to the bottom so that no matter what your content length is, the footer will stick at the end of the page.

Option with Astra theme –

Add the following filter to child theme’s functions.php file.

<?php // don't copy this line in your code.
add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content");
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

Option with Astra Pro Addon plugin –

Sticky Footer option is available with Astra Pro’s Custom Layouts addon.

• Firstly, you will need to Enable the Code Editor to insert code in Custom Layouts
• Next, we need to design a footer and set it as a sticky using the below code. Choose the Layout as Hooks, and the Action as wp_footer.
• With Display On setting, you can set it to be displayed on a particular page or on the entire website. 

Following is the above code which can pasted under the Custom Code Editor.

<script type="text/javascript">
	document.addEventListener(
		"DOMContentLoaded",
		function() {
			fullHeight();
		},
		false
		);
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content");
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
</script>