Question

在我的网站上，我有3个背景图像应用于body元素（给出顶部，左边和底部边框的印象），如下所示：

body {
    background: url('../image/body-x.gif') repeat-x 0 0,
                url('../image/body-x.gif') repeat-x 0 100%,
                url('../image/body-y.gif') repeat-y -280px 0;
    background-color: #47b48e;
}

由于页面很长，因此大部分时间显示都很好。但是在较短的网页上 - 例如404模板http://www.mattpealing.co.uk/asdfadsf - body-x.gif并不是贴在页面底部，如下所示：

enter image description here

我尝试添加以下代码（我过去曾多次读过这是一个常见的解决方案）：

html, body {
    height: 100%;
}

但我永远无法让它发挥作用。它仍然没有出现在底部，而是在其他页面上打破它。例如在“关于”页面上，底部边框图像与正文副本重叠，就像在此屏幕中一样：

enter image description here

任何人都可以看到我做错了吗？

Answer 1

尝试：

html, body { min-height: 100% }

来自：Make <body> fill entire screen?

顺便说一句，如果你在身体上使用了白色的顶部和底部边框，并且只使用了左侧白色空间的背景图像，该怎么办？这将使代码更简单并减少一些不必要的HTTP请求。

CSS背景图片：页面底部

1 个答案: