Html 更改页面其余部分的颜色

我正在建设的一个网站有问题

并非所有页面的长度都足以填满整个浏览器，底部留下白色。您可以在问题下方的图像中看到

你可以看到网页下方有空白

实际上，我希望扩展页脚以填充页面的其余部分

请注意，设置HTML的颜色仅在FireFox中有效

下面是我的相关CSS代码

此外，下面是我的示例图像中使用的页面的HTML：

上面的代码有点凌乱，因为我不得不用它们包含的代码替换一些include，但是我认为可以清楚地看到页面是如何编码的

关于最好的方法有什么建议吗

---

回答：我通过添加

min-height: 100vh;
background-color: #3D3D3D;

添加到body div，然后重新调整一些HTML。

添加以下CSS：

body {
    min-height: 100vh;
}

这将使页面的高度至少等于视口的高度

更新：正如panther在评论中提醒的那样，检查浏览器兼容性

---

更新2:当然，这只会在页脚卡在底部时起到预期的作用。有关将页脚粘贴到页面底部的CSS，请参阅。

如果页脚背景颜色为暗灰色，请将此颜色设置为

正文。白色背景将设置为
#content
部分。请参阅使用左/右填充和负边距的技巧

<style>
    body {margin: 0; background: #333;}
    #outer {overflow: hidden;}
    #wrapper {width: 980px; margin: 0 auto;}
    #content {margin: 0 -1000px; padding: 20px 1000px; background: white;}
    #footer {color: #fff; padding: 20px 0;}
</style>

<div id="outer">
    <div id="wrapper">
        <div id="content">content<br>content<br>content<br>content<br>content<br>content</div>
        <div id="footer">footer</div>
    </div>
</div>


正文{边距：0；背景：#333；}
#外部{溢出：隐藏；}
#包装{宽度：980px；边距：0自动；}
#内容{边距：0-1000px；填充：20px-1000px；背景：白色；}
#页脚{颜色：#fff；填充：20px 0；}
内容
内容
内容
内容
内容
内容
内容
页脚

您也可以将页脚向下移动到底部，如下所示：

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

如果你发布你正在使用的代码，我们可以提供帮助。谢谢，不过我已经收到了答案。我可以问一下，为什么这个被否决了？我可以修正它，让它再次被否决吗？我不确定，我没有否决这个。可能是因为您没有共享您正在使用的代码。好的，谢谢。我将附加我现在使用的代码，以帮助有类似问题的未来用户。您应该放置一个指向浏览器支持表的链接，这些天的支持只是部分。谢谢，这解决了我的问题，最后我将设置为最小高度100vh，然后将其颜色设置为我想要填充其余页面的颜色，作为div的背景色。