html - 试图让div标签扩展到浏览器的底部

现在我在我的身体标签中使用一个大的居中图像。

第一张图片基本上是首页的样子。看起来很棒。

enter image description here

第二张图片有一些内容，并按下页脚和整个页面。但看起来还不错。

enter image description here

最后一张图片包含大量内容并将所有内容都向下推，甚至超过了正文背景图片的高度。

enter image description here

所以我的想法是在第一张图片中看到的颜色变化背景过于分散，其中页脚开始，并将其添加为页脚DIV的背景。

但问题是背景的那部分在第一张图片中经过了浏览器。如果我要将BG放在我的页脚DIV中，它必须是500px的高度，从而产生滚动条。

基本上我想把背景的下半部分放在我的页脚DIV中并让它像BODY一样，因为它不会创建滚动条。

我认为这比我之前的解释更清楚了吗？很难解释！

那么在第一个截图中，背景是一个大图像？是的，您需要将背景分开。

现在让我们假设这些事情：

1。）您已将身体的背景颜色设置为黑色（显示的黑色条纹是身体背景而不是图像的一部分。）

2。）您已将图像分割，因此下半部分是页脚div上的背景图像。

您可以通过确保没有边距推动页脚div远离浏览器窗口来消除黑条，并确保重置浏览器本身创建的任何默认边距。（即body {margin：0;}）但是，该栏仍然可以显示在其他浏览器中（通常是Safari）。一种解决方案是将<body>标记的背景设置为与页脚标记相同。这只适用于可重复的图像。

我认为你最好的选择是将图像的底部淡化为黑色，就像你在边缘处所做的一样。

您可以使用background: scroll;使内容在背景上滚动，但以不同的分辨率查看，您仍然可以看到图片的底部。