6

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

还没有什么工作。有人对我有任何提示吗？

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

这是两个链接；

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

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

提前谢谢各位！

4

4 回答 4

9

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

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;
}
于 2011-05-18T20:24:15.977 回答
0

粘性页脚和粘性背景合二为一。将背景图像的高度作为页脚高度，并确定您的内容需要与多少图片重叠。要让粘性页脚“消失”，请在主边距底部使用与页脚高度相同的数字。这是来自粘性页脚的原始设计的适度设计：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;
}
于 2014-04-11T13:20:01.237 回答
0

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

于 2011-05-18T20:25:54.017 回答
0

我相信你的问题是双重的。首先，您为#content-image div 设置了高度。去掉那个高度。

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

试试看。

于 2011-05-18T20:30:58.797 回答