How To Force Astra’s Footer To The Bottom

I had this issue when the content is too short, and the footer is in the middle of the page. Not at the bottom. I tried a couple of custom CSS that made the footer float at the bottom, which is not what I wanted, but I found out how to make it stick to the bottom.

Thank you to @brainstormteam for actually providing the code. You can see the full thread here.

  1. Go to Apperance > Theme Editor in your WordPress Dashboard.
  2. Click on Theme functions (functions.php) in the Editor.

3. Add the following code to the bottom of the PHP file.

add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
	<script type="text/javascript">
			function() {
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content"); = "calc( 100vh - " + headerFooter + "px )";

And it should force it to the bottom.


  • You might need to change the 100vh part to different numbers to get it exactly where you want it. I had to use the number 97.2 to have no additional space.
  • When the theme updates, it will remove the code. You will need to re-add it on every update.
  • Astra does offer this as a paid premium feature. If you have the money, please support the theme creators.

I hope that helps! Have a great day!


Leave a Reply

Your email address will not be published. Required fields are marked *