CSS 背景颜色不完整，没有正确覆盖整个页面

Question

我正在尝试为我的页面添加背景颜色，但它没有正确覆盖整个页面。

截图1：从这里可以看出，卡片后面的背景有空白：

CSS代码

#background
{
    background-color:#9B59B6;
    margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/
    width: 100%;
}

如果我添加：

 position:absolute;
height:100%;
width:100%;

它会解决问题，但是，它会导致另一个问题，如下所示：

截图2：这里，当我添加更多的卡片，向下滚动时，背景下方有一个空白区域：

屏幕截图 2 的 CSS 代码

#background
{
    position:absolute;
    height:100%;
    width:100%;
    background-color:#9B59B6;
    margin: -19px 0 0 0;
    width: 100%;
}

我该如何解决这个问题？我尝试使用 position:relative 或 overflow:hidden ，但它没有帮助。

我在 ASP.net MVC 6 上这样做，所以格式是 cshtml 而不是 html。

请帮忙，谢谢！

原文由 Jason Christopher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

利用 viewheight 和 viewwidth：

 html,
body,
#background {
  width: 100vw;
  min-height: 100vh;
  background-color: #9B59B6;
}

也许让它成为静态的（没有 min- 前缀）并添加零填充/边距来修复白色间隙。

原文由 Luuk Skeur 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

body{background-color:#9B59B6;}

这应该工作。但是#background id设置的html元素是什么？

我想这就是问题所在。

原文由 Kavitha Madhavaraj 发布，翻译遵循 CC BY-SA 3.0 许可协议