Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    HI guys. I'm making my website and I'm with a couple of doubts. How can I make the footer div stretch until the bottom of the browser?
    For example for this link :

    http://www.luisporem.com/extras/404_error.html

    the css for the footer div is:

    #footer_dark {
    height:100%;
    width: 950px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 60px;
    padding-left: 30px;
    background-color: #191919;
    overflow:hidden;
    }

    and I think that this two one's are important to the task I'm aiming for:

    body {
    margin-top:0px;
    margin-bottom:0px;
    height: 100%;
    padding: 0;
    background-color: #D8D8D3;
    }

    #wrapper {
    height: 100%;
    width: 1010px;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #E5E5E5;
    }


    hope someone can help me. Thanks

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    it looks fine to me. im using ubuntu 9.10 ff 3.5 . ifyou are having issues in ie you may try adding this to the head

    <meta http-equiv='X-UA-Compatible' content='IE=8' />

    after adding it you will need to clear browser chach to see the results because ie also caches the rendering mode as well.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Feb 2010
    Posts
    18
    Member #
    21141
    perhaps because your resolution in not big enough but in big screens the footer doesn't touch the bottom of the browser.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    See my post at http://www.webdesignforums.net/showp...7&postcount=14 for how to attach the footer to the bottom of the page.

    Your need is slightly different, however, because you don't want it attached to the bottom, you want it stretching to the bottom. You can, however, basically fake this by setting the appropriate background color on the body tag so that if there is extra space between the end of the content and the start of the footer, it will be of a matching background color and therefore unidentifiable.

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    unless they want to change it to an image at a later date. back to square one. would't that be side stepping the actual question?

    while($get_it !== true){ continue; }

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Not... Really, no. The effect is the same. If you want to use an image, you can attach the image to the bottom of the container element (be it the body or a wrapper div) using regular CSS properties. So the technique can remain unchanged.

    Stretching a footer with a background image also comes with its own issues, like dealing with the fact that part of it may disappear underneath other page elements, but I assume in the hypothetical that this would have been taken into consideration.

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    create a div under the final content for your footer. if you want an image and the size may change, decide if you want the extra image space to draw from the top or bottom of the div. to draw from the top use bottom background: url(path/to/bg/image.ext) bottom; or to draw from the bottom just a standard background: url(path/to/bg/image.ext); will do. i recommend useing a div for the footer because using a body bg or using a bg in the main content will have to be dealt with when you come back later to make changes that may not look so hot with such a blanket fix. even if you are just using color.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

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

Search tags for this page

css stretch bottom footer

,

stretch background image css with footer

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com