BODY 背景图像在浏览器视口上被截断答案

【问题标题】：BODY background image gets cut off on browser viewportBODY 背景图像在浏览器视口上被截断
【发布时间】：2012-07-07 22:05:05
【问题描述】：

已解决
我使用了下面 Roman 提出的解决方案，基于添加一个额外的 DIV 和 position:absolute，我在 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 样式，它是所有网页元素 (#contenedor)

我还唱了一个“粘页脚”技术，当“主要内容”区域中有小内容时，将页脚“粘”到页面底部。 p>

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

我到现在为止的尝试：

添加一个额外的容器 DIV 包围所有（这对我来说没问题），但是这样做会破坏“粘滞页脚”（也许我没有找到正确的方法来做到这一点...我不知道）。

使用以下命令强制 BODY 与 HTML 一样高：

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

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

您可以查看示例：
带有“小内容”的索引都可以...底部的页脚等。
http://carloscabo.com/bg/index.htm

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

您也可以在以下网址下载本示例的所有文件，进行自己的本地测试。
http://carloscabo.com/bg/stackoverflow_html.zip

【问题讨论】：

您需要支持哪些浏览器？看起来你需要支持 IE6..
Chrome、Firefox 和 IE7+（如果可能）。我不需要 IE6 :)

标签： css html layout

【解决方案1】：

由于我不太明白的原因，似乎身体被困在视口的 100% 高度。它拒绝增长超过这个点，并且不继承整个页面的实际高度。

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

首先让我们从 html 开始：
- 在 head 部分之前添加一个 helper 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：
- 从 body 中移除背景，并像这样将其放入新的 helper 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;
}

瞧！
希望对你有帮助！！！

【讨论】：

我尝试了这个解决方案，它适用于“短”索引：carloscabo.com/bg2 但对于长索引似乎以同样的方式失败:(carloscabo.com/bg2/index_tall.htm（现在 BG 图像称为“ xtra")，也许我做错了什么……我只在 Chrome 上测试过。文件：carloscabo.com/bg2/html_stack.zip
更正！我错过了容器上的位置：相对...我会在其他网络浏览器上尝试，但似乎可以工作！
哈哈哈乐于助人！虽然我没有在 IE7/8 中尝试过。请告诉我们它是否有效。

【解决方案2】：

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

min-height: 900px;

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

【讨论】：

【解决方案3】：

我需要确切了解您想要完成什么才能更好地帮助您，但我会尽我所能提前给你一些提示

您不应该为HTML 标签应用背景。
不要玩你body的height属性，它会弄乱sticky footer，而是让body高度随着内容自然增长。
body 会随着内容的增长而增长，但 html 不会。 html 标签不是容器。

【讨论】：