Question

我遇到的问题是该网站在页面底部不断给出大空格，不知道为什么会发生这种情况？

我对内容有这个问题：

    #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;
    }

我正在使用此脚本将背景图像调整到窗口：

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

使用功能更新

    // 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();
    };

谢谢！

Answer 1

如果你移除身高：100％并使#footer位置：绝对没有间隙。

Answer 2

非常好看的照片btw :)

问题是绝对应用的位置（通过jquery可能因为它不在css中？）到全背景div。您将其设置为绝对位置为前0位。如果我在全背景div上禁用绝对位置，则间隙消失。

Answer 3

如果您要做的就是为背景制作完整尺寸，可缩放的图像，请尝试使用以下代码。这是使用CSS3标准，它稍微优雅。然后你可以使用它来使它褪色等。但这基本上会为你的内容提供一个背景图像，它不会重复，它是垂直居中的＆amp;水平，以及固定在窗口。背景尺寸封面将使其全部可扩展/响应屏幕尺寸。

#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;
}

在ASPx中使用DropDownList时，我也遇到了类似的问题。在具有隐藏溢出和最大高度的容器中的DropDownList上使用position：relative为我修复了这个问题。

希望这有帮助

页面底部的空白区域

3 个答案: