Fixed Footer with Content Scrollbar

  • Anonymous


    I am trying to line up the footer with the background image and trying to implement a way to keep the content at a certain height (with a scrollbar) so the footer will stay in the same position on all the pages.

    I’m mainly looking for the CSS code, I haven’t been able to find it anywhere but I know it’s possible!

    Many thanks to whomever can help me, it is greatly appreciated!


    Kenneth John Odle


    Add position:absolute; to your #footer id in your child theme stylesheet. You may have to further refine its position. See this page for a bit more help with that.



    Well, you can always use something like <div style="width: 960px; height: 100px; overflow: auto">YOUR CONTENT HERE</div>.

    The problem is having to insert it into the current template.

    Here is one solution (although Syahir may have a better one, so be sure to check back on this thread).

    I hope you are using a child theme. If you are, copy your footer.php file from the graphene directory into your graphene-child directory.

    Now, in the editor, select “graphene-child” from the drop-down list and then select footer.php to open it in the editor.

    Look for this line (about a third of the way down):

    <?php do_action('graphene_before_footer'); ?>

    and add this directly after it:

    <div style="width: 960px; height: 100px; overflow: auto">

    Next, to close the div tag, look for this line:

    <?php wp_footer(); ?>

    And add this line directly after it:





    Yeah, I think I went the wrong direction with my post. But, I’ll leave it there in case it helps anyone in the future.

Viewing 4 posts - 1 through 4 (of 4 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum