CSS：滚动时背景图像不填充 - redux
我正在寻求帮助来尝试解决我的背景图像填充问题。我想要一个粘性页脚，我终于弄清楚了，但现在如果我在较小的窗口中查看我的网站然后向下滚动，我的背景图像就会消失。我知道这是因为我的高度设置为 100%，这使得我的图像基于初始视口大小，但我似乎无法实现任何类型的修复。
这是我正在开发的网站（仍在开发中）：http://student. plattsburgh.edu/stipl001/index.html。
在小窗口中查看此页面时可以最好地查看问题： http://student.plattsburgh .edu/stipl001/resume.html。
我在各个网站上阅读了很多很多帖子试图弄清楚（包括这个：CSS：滚动时背景图像不会填充），但我没有任何运气。我尝试在CSS中设置我能想到的所有不同的背景属性，包括一些较新的属性。然后我尝试了溢出属性，但它只是隐藏了我的所有文本或创建了一个奇怪的滚动条，使我的文本在标题上向上滚动。我还尝试将页面背景从 body 移动到 html，将容器背景从容器移动到 body，但它没有改变任何内容，所以我一定做错了什么（也许我有两个背景图像需要处理？ ）。
我只是一个编码新手，一直在自学，所以我非常感谢关于哪种修复方法最适合我的网站以及如何实施它的具体建议。在花了大约 10 个小时解决这个问题之后，我已经束手无策了。
太感谢了！
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只需将 min-height:100% 更改为 min-height:1092px （图像的高度），你就会没事的...
编辑：
之前的答案有点太快了，在第二次查看我注意到的代码之后该错误是由浮动列引起的：如果浮动一个元素，容器元素将不会继承浮动元素的高度 - 这就是为什么高度设置为初始窗口的 100%，并且如果内容列则不会扩展得到更长。
这可以通过在 #container 中的 #rightcolumn 之后添加一个额外的元素来解决，并在其上添加clear:both - 这将强制父元素接管其内容的高度。
请参阅 http://jsfiddle.net/uS7Ba/1/ 了解简化示例，包括改进的固定页脚。
希望它有帮助...
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...