全屏背景，窗口较小时页脚下方有空白答案

【问题标题】：Full screen background, white space below footer when window is small全屏背景，窗口较小时页脚下方有空白
【发布时间】：2014-08-24 18:23:44
【问题描述】：

解决方案：我使用了http://srobbin.com/jquery-plugins/backstretch/，这是我找到的最佳解决方案。不完美，因为背景图形不会向下“滚动”但仍然有效。

这是我的问题的截图：

如您所见，当我调整窗口大小（使其更小）时，会出现空白。有谁知道问题是什么？

HTML：

<body>
<div id="wrapper">

    <header>
        <div id="services">
            <div class="column-left">Column left</div>
            <div class="column-center">Column center</div>
            <div class="column-right">Column right</div>
        </div>
    </header>

    <section><img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" alt="PPP" /></section>

    <footer>
            <p>Some text here</p>
    </footer>
</div>            
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
    <script src="js/main.js"></script>
</body>

CSS：

    body {padding:0;margin:0;}
html {
    color: #fff;
}
#wrapper {
    background: url(../images/bg2.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;

}
#services {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    overflow: hidden;
}
.column-left{ 
    float: left;
    margin-top: 100px; 
    width: 200px; 
}
.column-right{
    float: left;
    margin-top: 100px; 
    width: 200px; 
}
.column-center{
    float: left;
    margin-top: 100px; 
    width: 200px; 
}

footer { 
    border-top-style: solid;
    border-top-width: 1px;
    border-color: white;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}
section {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    width: 800px;
}
section img {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    display: block;
}

【问题讨论】：

您可以在 3rror404 制作的这个 jsfiddle 中看到问题：jsfiddle.net/aju126yw/2 调整预览窗口大小，您会在页脚下方和右侧看到空白区域。在我看来，这个标志造成了一些麻烦？

标签： html css fullscreen

【解决方案1】：

我认为非常好的解决方案，即使它不是技术上的可调整大小，因为您不能设置 CSS 背景图像的大小。

Found on cssTricks

也许这是你的一个选择，但这是一个 jquery 的解决方案：

<head>
    ....
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() { 
        $("img.source-image").hide();
        var $source = $("img.source-image").attr("src");
        $('#page-body').css({
            'backgroundImage': 'url(' + $source +')',
            'backgroundRepeat': 'no-repeat',
            'backgroundPosition': 'top center'
        });
    }); 
    </script>
</head>
<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

Found on cssTricks

【讨论】：

任何 html/css 仅修复？