CSS:滚动时背景图像不会填充 - redux

时间:2011-12-04 19:55:07

标签: css xhtml background-image

我正在寻求帮助,尝试解决我的背景图片填充问题。我想要一个粘性页脚,我终于想通了,但现在如果我在一个较小的窗口中查看我的网站然后向下滚动,我的背景图像就会消失。我知道这是因为我的高度设置为100%,这使我的图像基于初始视口大小,但我似乎无法实现任何类型的修复。

以下是我正在处理的网站(仍在开发中):http://student.plattsburgh.edu/stipl001/index.html

在小窗口中查看此页面时,最好查看问题:http://student.plattsburgh.edu/stipl001/resume.html

我在各个网站上阅读了很多很多帖子,试图找出它(包括这个:CSS: background image does not fill when scrolling),但我没有运气。我尝试在css中设置我能想到的所有不同属性,包括一些较新的属性。然后我尝试了溢出属性,但它只是隐藏了我的所有文本或创建了一个奇怪的滚动条,使我的文本向上滚动标题。我也尝试将我的页面背景从body移动到html和我的容器背景从容器到正文,但它没有改变任何东西,所以我一定做错了(也许我有两个背景图像来处理? )。

我只是一个编码新手,并且随着我一直在教自己,所以我真的很感激具体的建议是什么方法来解决这个问题最适合我的网站,以及如何实施它。在这个问题上花了大约10个小时之后,我就在我的智慧结束。

非常感谢你!

1 个答案:

答案 0 :(得分:0)

只需改变最小高度:100%到最小高度:1092px(图像的高度),你会没事的......

编辑:

之前的回答有点太快了,在对代码进行第二次查看后我注意到错误是由浮动列引起的:如果浮动一个元素,容器元素将不会继承浮动元素的高度 - 这是为什么高度设置为初始窗口的100%,如果内容列变长,则不会展开。 这可以通过在#rightcolumn之后的#container中添加一个额外的元素来修复:clear还有 - 这将强制父元素接管其内容的高度。

有关简化示例,请参阅http://jsfiddle.net/uS7Ba/1/,包括改进的固定页脚。

希望它有所帮助...