www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS to get footer to stay at the bottom of the page

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    Angry CSS to get footer to stay at the bottom of the page

    Hello,

    I have been trying to figure this out and I can't seem to do it. I have coded a forum and I want to be able to get the footer to adjust to the content of the page and stay at the bottom. Right now I have the height set to a certain px which leaves a large space between the content and the footer if there is less content on the page.

    I have tried setting the min-height and height to 100% but that seems to be ignored by the footer css. After I did that I set the position to absolute and the bottom to 0 but the footer ignores the height and is either in the middle of the page or up by the header. It seems like the only way the footer css is applied is when the content height is a set px.

    This is starting to get really frusterating as my static pages work fine but pages that have to adjust based on the content have big blank space incase the content that is added is large. Any help would be very much appreciated as this is the main thing I have to fix to have my forum looking the way I want it to.

    Here is the website I am talking about if you want to check out my issue: http://www.realitytvaddict.com

    If you click on a thread to read a post then you will be able to scroll down and see what I am talking about.

  2. #2
    Join Date
    Mar 2009
    Posts
    452
    try

    position: absolute;
    bottom: 0;

  3. #3
    Join Date
    Feb 2012
    Posts
    61
    The code is here.....


    <style type="text/css">
    html, body {
    height: 100%;
    }

    div.header, div.foo { display:block; text-align: center; }

    div.header { height:30px; background-color:#f5f5f5 }

    .navbar-fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
    }

    .content {
    position: relative;
    min-height: 100%;
    height: auto !important;
    margin-bottom: -50px; /* the bottom margin is the negative value of the footer's height */
    }
    div.container{
    padding:20px 0px 50px 0px;
    }

    div.foo {
    height: 50px;
    position: relative;
    background-color:#dddddd;
    }

    </style>

    <div class="header navbar navbar-fixed">
    This is the Header
    </div>
    <div class="content">
    <div class="container">
    <p>see the forest for the trees.</p>

    </div>
    </div>
    <div style="clear:both;"></div>
    <div class="foo">
    This is the footer, which will stay at the bottom!
    </div>
    Thanks,
    Som
    Full2pune

  4. #4
    Join Date
    Feb 2012
    Posts
    102
    Quote Originally Posted by ZABI View Post
    try

    position: absolute;
    bottom: 0;
    I did that and it did not work. I stated that in my original post.

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,129
    Quote Originally Posted by ZABI View Post
    try

    position: absolute;
    bottom: 0;
    Wow, did you even read his post?

    What you're looking for is a "sticky footer." If you Google that, you can find examples. Here's one I've used:
    http://ryanfait.com/sticky-footer/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  6. #6
    Join Date
    Feb 2012
    Posts
    102
    Thanks for the post but I have tried using that exact code but for some reason it is still not keeping the footer down. I figured it would work if it was working for other people. That is why I am so confused.

  7. #7
    Join Date
    Feb 2012
    Posts
    102
    Someone please help as I am getting to the point of pulling out my hair!!

    I have tried every script I could find about a sticky footer but because my content is being created dynamically the height of the page varies significantly from page to page. For some reason setting height to auto or 100% doesnt work it places the footer in the middle of the page. If I take the height property out completely the footer is placed at the top of the page mixed in with the header. The only way the footer goes to the bottom of the page is if I put in a specific height in px.

    Please someone help me out!!!!

    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles