0

我遇到的问题是该网站一直在页面底部提供一个很大的空白区域，知道为什么会这样吗？

我在内容上有这个CSS：

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

谢谢！

4

3 回答 3

0

如果您删除 body height:100% 并设置 #footer position:absolute ，则不会有间隙。

于 2013-02-15T09:46:24.313 回答
0

如果您要做的只是为背景制作全尺寸、可缩放的图像，请尝试使用以下代码。这是使用 CSS3 标准，它稍微优雅一些​​。然后，您可以使用 JavaScript 使其淡化等。但这基本上会为您的内容提供背景图像，它不会重复，它垂直和水平居中，以及固定在窗口中。背景尺寸封面将使这一切都可扩展/响应屏幕尺寸。

#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 为我解决了这个问题。

希望这可以帮助

于 2013-06-10T17:25:44.720 回答
0

真的很好的照片顺便说一句:)

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

于 2013-02-15T10:05:28.677 回答