white space at the bottom of page

Question

The problem I have is that the site keeps giving a big white space on the bottom of the page, any idea why is that happening?

I have this css on the content:

    #content{
        width: 990px;
        margin: 0 auto;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -40px;
        position: relative;
    }

    .full-background {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

and i´m using this script to fit the background image to the window:

    function fittobox(){
        $('.fittobox').each(function(){
            $(this).fitToBox();
        })
    }
    $(window).bind({
        'load' : fittobox,
        'resize' : fittobox
    })

Update with the function

    // fitToBox
    jQuery.fn.fitToBox =
    function(){
        var div = this.parent();
        var img = this;
        var imAR = img.attr("height") / img.attr("width");
        var bgAR = div.height() / div.width();
        if(imAR >= bgAR){
            img.attr("width" , div.width());
            img.attr("height" , div.width() * imAR);
        }else{
            img.attr("height" , div.height());
            img.attr("width" , div.height() / imAR);
        }
        div.css({
            "position" : "absolute",
            "overflow" : "hidden"
        });
        img.css({
            "position" : "absolute",
            "left" : (div.width() - img.attr("width"))/2,
            "top" : (div.height() - img.attr("height"))/2
        });
        img.fadeIn();
    };

thanks!

Answer 1

如果您删除身高：100％并设置为#footer位置：绝对没有间隙。

Answer 2

Really nice picture btw :)

The problem is the position absolute applied (by jquery maybe as its not in the css?) to the full-background div. You have it set to position absolute with a position of top 0. If I disable position absolute on the full-background div the gap goes away.

Answer 3

If all your trying to do is make a full size, scalable image for a background try using the below code. This is using the CSS3 standard and it slightly more elegant. You can then use the JavaScript to make it fade etc. But this will basically give it a background image for your content, it wont repeat, it is centered vertically & horizontally, as well as fixed in the window. The background size cover will make this all scalable / responsive to the screen size.

#content{
background: url(img/yourbackgroundimage.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I also came across a similar problem when using a DropDownList in ASPx. Using position:relative on the DropDownList within a container with a hidden overflow and max-height fixed this problem for me.

Hope this helps