图像不粘在页面底部答案

【问题标题】：image doesn't stick to bottom of page图像不粘在页面底部
【发布时间】：2012-12-01 17:06:21
【问题描述】：

我收到了this design，我正在尝试申请my website。请注意，<html> 元素有一个背景图片（手在空中），它贴在页面底部。

但是，当我将 css 文件迁移到我的应用程序时，由于某种原因，此图像出现在页面的中间位置。我检查了相关的 CSS，在这两种情况下都是：

html {
 background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../img/bg.svg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    outline: 0 none !important;
}

那么为什么图片粘在页面底部here，却出现在页面的中间here。

【问题讨论】：

标签： html css web-applications

【解决方案1】：

您已为您的html 和body 设置了height: 100%。通常这样做是为了能够拥有全高元素。但在这种情况下，这被证明是问题的原因。删除它可以解决问题。

检查 Firebug 或 Chrome Inspector，你会看到类似的东西：

html, body {
    height: 100%;
}

删除它。或从您的样式表中覆盖它。

【讨论】：

【解决方案2】：

由于body { height: 100% } 样式，它无法在第二个站点上运行。

静态/bundle-bundle_responsive_head.css：

html, body {
    height: 100%;
}

【讨论】：

【解决方案3】：

看起来第一个链接的计算高度设置为使图像位于底部，而对于图像出现在下方的链接，计算高度要低得多。 height: 170px; 与 height: 2006px; 相比

~~我不确定是什么为您设置了高度，但整理出来会解决您的图像问题~~

编辑：实际上，这条规则似乎只在其中一个网站上：

media="screen, projection"
html, body {
   height: 100%;
}

【讨论】：

【解决方案4】：

看起来实际上是body标签上的背景图片没有粘在底部。关闭 bundle-bundle-responsive-head.css 中的 height: 100% body 规则可以修复它，但我不确定这会如何影响网站上的其他内容。

我通过使用 Chrome 中的 DOM 检查器并打开/关闭各种元素的规则以查看它们会产生什么效果来发现这一点。

【讨论】：