全屏背景使用粘性页脚？答案

【问题标题】：Full screen background working with sticky footer?全屏背景使用粘性页脚？
【发布时间】：2012-02-02 21:48:01
【问题描述】：

我正在使用this tutorial 创建全屏背景。 （更新：对图像使用 100% 的高度和宽度不是我想要的，因为它只是拉伸图像，此脚本保持纵横比。）

我还尝试使用this tutorial 合并一个粘性页脚。

添加粘性页脚部分会在背景图像上创建一些额外的水平滚动。

我的图像是 700 像素 x 466 像素，我的浏览器窗口是 1240 x 1414。我的网站水平位于浏览器窗口的中间，但可以向右滚动一点。

如何使全屏背景图像与粘性页脚一起使用，以消除额外的水平滚动？粘性页脚需要位于背景图像的顶部而不是其下方。

更新：使用 Supr 的答案来解决水平问题，唯一需要解决的是页脚位于背景图像下方而不是在其顶部。

这是我的 CSS：

* {
    margin:0;
    }

html, body {
    height:100%;
    }

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }

.footer, .push {
    height: 4em;
    }   

.clear {
    clear:both;
    }

body {
    font-size: 62.5%; /* Resets 1em to 10px */
    background-repeat:repeat-x;
    background-image: url('images/background-repeat.jpg');
    margin:0px;
    }

#body {
    width:1000px;
    margin:0 auto 0 auto;
    }           

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

这是我的html：

<div class="wrapper">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background">
    <div id="maincontent">
        <div id="body"></div>

        <div class="push"></div>
    </div>

    <div id="footer">
        <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p>
    </div>
</div>

【问题讨论】：

请向我们展示该页面或添加您的代码。

标签： jquery html css

【解决方案1】：

添加页脚会导致水平滚动？只是一个未经测试的想法，但请尝试添加

.wrapper {
    overflow: hidden;
}

可能

#footer {
    overflow: hidden;
}

如果有东西（边距/填充）溢出页脚。

【讨论】：

太好了，谢谢它解决了水平问题。我现在唯一的问题是页脚位于背景图像下方而不是在其顶部。
尝试#footer{position:relative;}，如果这与您使用页脚的方式不冲突。
我想我需要重新排序 div，因为页脚实际上不在背景图像 div 中。

【解决方案2】：

没有看到您的代码很难回答，但在 firebug/webkit 开发人员工具中检查 html 和 body 元素以及包装您的内容的任何其他元素上的 css 溢出和其他显示属性。很可能有一个 overflow: auto 需要设置为 overflow:hidden;

【讨论】：

大部分元素默认有overflow:auto，所以尝试在body和html上设置overflow:hidden
查看您的代码，这也可能与 #mainContent 和 #body 上的样式以一种奇怪的方式发生冲突有关

【解决方案3】：

嗯？你为什么要这么麻烦？你没有给出任何分析代码，但我想你是在追求类似的东西：

body {
    margin: 0;
    background: url(folderInRootDirectory/myimage.jpg) no-repeat center center;
    background-size: cover;
}

或不使用 CSS3 的替代方案，以实现 IE8 兼容性：

#bg_img {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    z-index: -99999999999999;
}
body {
    margin: 0;
    min-width: 100%;
    min-height: 100%;
}

加html：

<body>
    <img id="bg_img" src="MYURL.JPG" />
    <!-- content -->
</body>

【讨论】：

我需要它在 IE8 中工作，以便排除您答案的第一部分。此外，您答案的第二部分只是将图像拉伸到 100% 的宽度和高度。全屏背景脚本保持图像的纵横比并使其填满屏幕，按照您的方式执行是一个非常不同的结果。
我想这就是你想要的“全屏”背景图片。您希望图像溢出，即部分隐藏，还是缩小尺寸以适应容器？
我发现是粘性页脚造成了额外的滚动。如果可能的话，我想溢出：隐藏；因为这只会填满浏览器窗口。我已经添加了我的代码。
我更新了答案的第一部分，尽管我只是在 Chrome 和 IE 中测试了答案的第二部分，并且没有扭曲纵横比。图像在最小轴上放大以占用可用空间，垂直轴上的溢出被隐藏...

【解决方案4】：

试试这个 mate 的 body 元素，

* {
    margin: 0;
    padding: 0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    outline: 0 none;
    vertical-align: baseline;
}
body {
    color: #404040;
}

body {
    background: url("../design/bg.gif") repeat-x scroll 0 0 #FFFFFF;
    font: 0.8em/1.5 "arial",sans-serif;
}

【讨论】：

干杯，但我不认为这会起作用，因为没有任何东西可以调整背景图像的大小并保持其纵横比。