Question

解决
我使用了Roman提出的解决方案，基于添加 DIV 与位置：绝对，我在IE7，IE8，IE9，Chrome和Firefox中测试了它，似乎工作得很好！

所以布局现在有3个完整的背景图像（我需要的东西），甚至你可以使用 BODY bg照顾它将被切断到浏览器的视口高度（仍然可能是在某些情况下有用），“三个半”带有“粘性页脚”的bg图像：）

唯一的缺点是我发现#footerContent中的链接不是“可点击的”，我使用 position：relative 解决了这个容器。

我对我提供的示例进行了更改，并将其上传到我的Dropbox，以防其他人发现它有用。谢谢大家的答案。 http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar

我上传了

我正在为一个网站构建一个非常复杂的布局，我需要有3个背景图片来覆盖网页的背景。所以我有一个 HTML 样式，一个是 BODY 样式，最后一个是 DIV ，它是所有的容器网页元素（ #connedned ）

我也唱了一个“Sticky footer”技术，让页脚“粘在”页面的底部，“主要内容”区域内的内容很少。

我遇到的问题是 BODY bg图像被切断到网络浏览器的视口，我的意思是，它不会重复显示在显示的可见区域之下当页面加载时，内容“高”足以使网页滚动。

到目前为止我尝试了什么：

添加一个额外的容器 DIV 围绕所有（对我来说没关系），但这样做它破坏了“粘性页脚”（也许我找不到正确的方法来做到这一点） ......我不知道。

强制 BODY 与 HTML 一样高，使用：

html>body {  
min-height:100%;  
height:auto;  
height:100%; }

这解决了BODY问题，图像重复但这也打破了“粘性页脚”...... :(

你可以看到一个样本：
带有“小内容”的索引都可以...底部的页脚等。
http://carloscabo.com/bg/index.htm

内容较高的索引页（简单 BRs ），向下滚动以查看BODY bg图片上的剪切 http://carloscabo.com/bg/index_tall.htm

您还可以在以下URL中下载此示例的所有文件，以进行本地测试 http://carloscabo.com/bg/stackoverflow_html.zip

Answer 1

由于一个我没有抓住的原因，似乎身体被卡住了100％的视口高度。它拒绝超越这一点，并且不会继承整个页面的真实高度。

但是，如果你不介意添加另一个辅助div，你可以轻松解决问题。

首先让我们从html开始：
- 在头部之前添加一个辅助div。

<div id="contenedor">

    <!--HELPER DIV GOES HERE: BACKGROUND FIX-->
    <div id="bgfix"></div>

    <header id="arriba">
        ...
    </header><!--header#arriba-->

    ...

<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->

现在让我们修改CSS：
- 从正文中删除背景，并将其放入新的辅助div中。

body {
    height:100%;
    min-height:100%
    text-align:center;
//  background:url(../img/bg_body.png) center top repeat-y;
    color:#fff;
}

#contenedor {
    position:relative; /* For #bgfix to attach here */
    ...
}

#bgfix {
    background:url(../img/bg_body.png) center top repeat-y;
    position: absolute;
    width: 100%; height: 100%;
    z-index:-1;
}

和VOILA！
希望它有所帮助!!!

Answer 2

为了更好地帮助你，我需要确切地了解你想要完成什么，但我会尽最大努力提前给你一些提示

您不应将背景应用于HTML标记。
不要使用你身体的height属性，它会弄乱粘性页脚，而是让身高随着内容自然增长。
body会与内容一起增长，但html不会。 html标记不是容器。

Answer 3

我找到的解决这个问题的方法是将min-height设置为

min-height: 900px;

900px是我使用的背景图像的实际高度。

BODY背景图像在浏览器视口中被切断

3 个答案: