www.webdeveloper.com
Results 1 to 8 of 8

Thread: help making footer stick to bottom of screen without covering content

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    12

    help making footer stick to bottom of screen without covering content

    I just added two pages to a site where people are redirected after form processing (good_url and bad_url). They have such little content on them that they don't take up the entire screen, so the footer floats up. I would like to figure out how to make the footer stick to the bottom of the screen without covering anything on more content heavy pages, or make the enclosing divs for the thankyou/error messages on these two pages expand to take up the entire screen.

    Made a JSfiddle for it:
    http://jsfiddle.net/yx6my/2/

    Dev site can be viewed at http://iphonebuy-host1.gaiahost.net.

    If you want to see the error page try http://iphonebuy-host1.gaiahost.net/...2pgdpkf58p2di3

    Thanks for looking!

  2. #2
    Join Date
    May 2013
    Posts
    15
    Just an idea:
    try removing
    Code:
    <div id="footer">...</div>
    from
    Code:
    <div id="main">...</div>
    , so put it outside and give the footer a fixed position.
    Code:
    #footer{position:fixed}
    I'm not really quite sure but you can give a try.
    The fact that the height of the main content is 100%
    the other way I managed to resolve this issue is just expanding the width of the enclosing divs for the thankyou/error, but you don't want this solution.
    Keep in mind, by placing the footer stick to the bottom, you will need to give a white background if you don't want to expand the enclosing divs for the thankyou/error, because it will place out of the main content

    Hope this give you a lil' idea

  3. #3
    Join Date
    May 2013
    Posts
    12
    Thank you for your ideas, noreplace. Actually, I wouldn't mind expanding the thankyou/error divs, I just don't know how to do it so it changes according to screen height. Is there a way to do that? Or would you just push them down far enough for it to look right on most screens?

  4. #4
    Join Date
    May 2013
    Posts
    15
    Seems like your page is down.!!! Go to your css folder and make change to the appropriate css file as follow:
    replace your "error div" with the following one
    Code:
    #error {
       height: 150px;
    }
    You can specify any height that best feet your needs: in px or %

  5. #5
    Join Date
    May 2013
    Posts
    12
    Hmm, I don't think the page is down. Thanks for your suggestions but I really would prefer a solution that changes according to monitor size, resolution, etc. Maybe the only option is to use JS, though it seems like it should be possible with CSS somehow. I currently have the height of those two divs set for 29em, which looks fine on my screen but it won't look exactly right on a larger or much smaller one.

  6. #6
    Join Date
    Mar 2013
    Location
    Iasi, Romania
    Posts
    53
    how about using
    Code:
    clear:both;
    This is for the footer and use floating for the elements above...
    This way, your footer will appear bellow the divs you need.
    And one more thing: you may need to use
    Code:
    display:block;
    for the divs above footer


    I saw your page...just put back in the "main" div your footer and remove its left margin.
    Last edited by ssdog; 05-28-2013 at 04:08 AM.

  7. #7
    Join Date
    May 2013
    Posts
    12
    Thanks ssdog, but that wouldn't address the problem I'm having. I ended up using CSSstickyfooter, which is why I had to move the footer outside of the "main" div. It's working okay now, though I had to add some funky margins to certain elements to get it to look right. It's a bit hacky but I'm calling it good for now

  8. #8
    Join Date
    Mar 2013
    Location
    Iasi, Romania
    Posts
    53
    Yeah...I wasn't payiing attention...
    You could use jQuery as well...and leave the footer inside the main div

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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