Make footer always at the bottom of the page?

  • sigudd

    (@sigudd)


    8 years, 6 months ago

    Hi, I have tried to make the footer always be placed at the bottom of the screen, but I don’t seem to manage. Tried several fixes and nothing is working.

    Can you please look at the code and tell me what code i need to place and where to make the footer always be at the bottom of the page.

    Please see my code bellow:

    <?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Sydney
 */
?>
			</div>
		</div>
	</div><!-- #content -->

	<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
		<?php get_sidebar('footer'); ?>
	<?php endif; ?>

    <a class="go-top"><i class="fa fa-angle-up"></i></a>

	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info container">
			divinedesign.ml ©Divine Design Studio
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>
Viewing 3 replies - 1 through 3 (of 3 total)
  • ashiquzzaman

    (@ashiquzzaman)

    8 years, 6 months ago

    This is not a WordPress issue but CSS layout known issue. Either you need to have enough content or you can use hacks like Sticky Footer Hacks to force the footer stay at the bottom.

    Thread Starter sigudd

    (@sigudd)

    8 years, 6 months ago

    This is not a WordPress issue but CSS layout known issue. Either you need to have enough content or you can use hacks like Sticky Footer Hacks to force the footer stay at the bottom.

    Sorry i didn’t know where to place this post. As i mentioned i tried to implement these type of codes with no success. Which code and where should i place it for the function to take effect.

    I tried this one with no effect. please help me

    * {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
    ashiquzzaman

    (@ashiquzzaman)

    8 years, 6 months ago

    Ryan’s sticky footer didn’t work for me, this one did – Sticky Footer. btw There’s also an JavaScript hack for sticky footer.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Make footer always at the bottom of the page?’ is closed to new replies.