背景内容图片需要贴在底部答案

【问题标题】：background content image needs to stick to bottom背景内容图片需要贴在底部
【发布时间】：2011-08-28 09:03:28
【问题描述】：

我正在尝试推送我的背景内容图片并使其粘在我的页面底部。该图像不是页脚，因为该图像将位于某些内容的后面。但是图片不应该在内容少时在顶部被截断，而在内容负载时应该贴在底部！

目前还没有任何工作。有人给我一些建议吗？

这里有两个例子。一个内容适合窗口，另一个内容更多。

这里有两个链接；

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test.html

http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html

提前谢谢各位！

【问题讨论】：

标签： html css sticky-footer

【解决方案1】：

我会使用background-attachment: fixed; 将图像作为body 的背景并添加：

html, body {
  height: 100%;
}

所以总数是：

html, body {
  height: 100%;
}
body {
  background-image: url("images/bg_content.gif");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

【讨论】：

呃哦？我赞成，但我不能接受答案，因为这不是我的问题
np - 它发生了......人们提出问题然后消失

【解决方案2】：

将背景应用于您的包装器并将背景位置设置为底部。诀窍是在包装器上设置与背景图像高度相同的最小高度。这将解决内容不足的问题，同时在内容很多时仍然与页面一起增长。

【讨论】：

【解决方案3】：

我相信您的问题有两个方面。首先，您为#content-image div 设置了高度。移除那个高度。

其次，因为您在该 div 中的内容是浮动的，您需要清除 #content-image div 上的浮动。类似：“溢出：隐藏；清除：两者”

试试看。

【讨论】：

【解决方案4】：

粘性页脚和粘性背景合二为一。将背景图像的高度作为页脚高度，并确定您的内容需要与多少图片重叠。要让粘性页脚“消失”，请在主边距底部使用与页脚高度相同的数字。这是来自于：http://www.webcreationz.nl/de-ultieme-sticky-footer-code（抱歉网站是荷兰语）的原始粘性页脚设计的缓和设计。

我刚刚想通了。我希望它会对某人有所帮助。

HTML：

<div id="container">

  <div id="main">text of your website</div>

  <div id="spacer"></div>

</div>

<div id="footer"></div>

CSS：

html, body { 
    height: 100%; 
}


#container {
width: auto; /* with number center with margin: 0 auto;*/
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -175px; /* height footer */
}

#main {
    height: auto;
    width: 618px;
    float: right;
    margin-top: 10px;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #E1E4EC;
    margin-bottom: -100px; /* overlap of 100 px into footer */

}

#spacer {
    display: block !important;
    height: 175px; /* height footer */
}

#footer {
    clear: both;
    height: 175px; /* height footer */
    width: auto; /* with number center with margin: 0 auto;*/
    background-image: url("images/plaatje jpg"; /* background picture */
    background-repeat: no-repeat;
    background-position: center bottom;
}

【讨论】：