Results 1 to 4 of 4

Thread: 100% height - footer sticking to the bottom

  1. #1
    Join Date
    Aug 2007
    Location
    Brazil
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 100% height - footer sticking to the bottom

    Guys, I just found this 3-column layout here.
    I need to know what is causing the footer to the bottom, making the minimum height always equals to 100%, because I need it for my website.
    I already tried to find out what is doing the magic, but couldn't figure it out. I commented and uncommented every single DIV but the footer always stick to the bottom. I tried to use the attributes and values that I could find in the source that I thought that could be related to it (min-height and height to the container, fixed height with negative margin to the footer), but still couldn't do it.
    Can anyone help me with this? min-height and height don't seem to work by themselves, but I don't have idea about what could trigger their effect.

    -----

    EDIT: OK, I managed to make the bottom of the page stick to the bottom of the viewport (with the html, body {height: 99.3%;} part that I had forgotten to put in my code). But now the #footer keeps moving up when the content of the #content column is too small. What to do?
    Last edited by naiani; 08-22-2007 at 04:47 PM.

  2. #2
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sry but i don't understand what you really need here? I see their html have been commented clearly

    Code:
    #footer {
    width: 760px;
    height: 30px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
    margin: 0 auto;
    margin-top: -30px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
    text-align: center;
    background-color: yellow;
    }
    And if can, plz give me ur site link and write ur needs with that link, i can image it more exactly

  3. #3
    Join Date
    Aug 2007
    Location
    Brazil
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi!
    The address is http://www.cglg-canada.com/testnew/index_imp.html.
    Just go to the page Services, or Visiting Canada, for example. Both are small. You'll notice that the page goes all the way to the bottom of the viewport, but the footer goes up, following the size of the tallest column. You can see it very clearly by the "faux columns" background that continues below the #footer, that has a white background color.

    Thanks for the help!

  4. #4
    Join Date
    May 2007
    Location
    Viet Nam
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    - When I use firefox and nothing to say.
    - When i use IE 6.0 i see your footer have something expand the bottom below footer. But i can see it doesn't need any technique. Your code:

    Code:
    body {
    	text-align: center;
    	overflow: scroll;
    	overflow-x: auto;
    	margin-top: 0;
    }
    This make margin-top to 0 and margin-left,right,bottom to AUTO. So it takes a little space below your footer. Edit it:

    Code:
    body {
    	text-align: center;
    	overflow: scroll;
    	overflow-x: auto;
    	margin: 0 auto;
    }
    Tested with IE 6 and worked fine. Hope that you need

Bookmarks

Posting Permissions

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