图像不会粘在页面底部
[英]image doesn't stick to bottom of page
问题描述
I was given this design that I'm trying to apply to my website . 
我得到了这个设计 ，我正在尝试申请我的网站 。 Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page. 请注意， <html>元素有一个背景图像（双手在空中），它粘在页面底部。
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. 但是，当我将css文件迁移到我的应用程序时，由于某种原因，此图像显示在页面的中间位置。 I've checked the relevant CSS and in both cases it's: 我检查了相关的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;
}
so why does the image stick to the bottom of the page here , but appear halfway down the page here . 那么，为什么像粘在页面的底部在这里 ，但中途会显示在网页这里 。
4 个解决方案
解决方案1
4 2012-12-01 17:16:59
You have height: 100% set for your html and body . 你有height: 100%为你的html和body 。 This is normally done to able to have full-height elements. 这通常是为了能够具有全高度元素。 But in this case, this is proving to be the cause of the issue. 但在这种情况下，这被证明是问题的原因。 Removing this it fix the issue. 删除它可以解决问题。
Check in Firebug or Chrome Inspector and you will see some thing like: 检查Firebug或Chrome Inspector，您会看到以下内容：
html, body {
height: 100%;
}
Remove it. 去掉它。 OR Override it from your style sheet. 或者从样式表中覆盖它。
解决方案2
3 2012-12-01 17:15:09
It's not working on the 2nd site due to the body { height: 100% } styling. 由于body { height: 100% }样式，它不能在第二个站点上运行。
static/bundle-bundle_responsive_head.css: 静态/捆bundle_responsive_head.css：
html, body {
height: 100%;
}
解决方案3
2 已采纳 2012-12-01 17:14:38
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower. 看起来第一个链接的计算高度被设置为使得图像位于底部，而对于图像看起来部分向下的链接，计算的高度要低得多。 height: 170px; compared to height: 2006px; 与height: 2006px;相比height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
我不确定是什么设置了你的高度，但排除它将解决你的图像问题
Edit: Actually it seems to be in this rule which is only on one of those sites: 编辑：实际上它似乎在这个规则中只在其中一个网站上：
media="screen, projection"
html, body {
height: 100%;
}
解决方案4
2 2012-12-01 17:16:19
It looks like it's actually the background image on the body tag that is not sticking to the bottom. 它看起来实际上是身体标签上的背景图像没有粘到底部。 Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site. 关闭height: 100% bundle-bundle-responsive-head.css中的height: 100%正文规则修复了它，但我不确定这将如何影响网站上的其他内容。
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have. 我通过在Chrome中使用DOM检查器并打开/关闭各种元素的规则来查看它会产生什么效果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.