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

【问题标题】：CSS Background color is not full, it does not cover the whole page properlyCSS 背景颜色不全，没有正确覆盖整个页面
【发布时间】：2016-09-28 05:03:51
【问题描述】：

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

截图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。

请帮忙，谢谢！

【问题讨论】：

标签： html css twitter-bootstrap background-color

【解决方案1】：

利用viewheight和viewwidth：

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

也许将其设为静态（不带 min- 前缀）并添加零填充/边距以修复白色间隙。

【讨论】：

【解决方案2】：

body{background-color:#9B59B6;}

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

我想这就是问题所在。

【讨论】：

【解决方案3】：

我认为你的身体没有设置为 100% 的高度。

html, body {
    height: 100%;
}

然后

#background {
    height: 100%;
}

但是为什么不直接给body设置背景色属性呢？

【讨论】：

【解决方案4】：

给身体上色

 body{
     background-color:black;
  }

【讨论】：

我试过了，和截图1一模一样，没有覆盖整个页面。它只涵盖最后一张牌。我在 cshtml ASP.net 上这样做，所以我不能使用 body 属性。

【解决方案5】：

你必须确保覆盖整个身体财产

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

<html>
  
  <body >
    </body>
  </html>

问题可能是因为您正在实现特定 div 的 id（例如 #background）。确保使用bodyproperty。

【讨论】：

嗨 JokerFan，我不是在 HTML5 上做这个的。我在 ASP.net 上做这个，所以格式有点不同，它使用 div 而不是 body。我会稍微编辑一下这个问题。感谢您的意见！

【解决方案6】：

您应该正确使用body { background: #9B59B6 } 或者您需要将#background 固定而不是absolute

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

浏览器在页面上有默认填充，您可以使用 html, body { padding: 0 } 而不是 margin: -17px 禁用它

【讨论】：

【解决方案7】：

body{
margin:0px;
padding:0px;
}

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

}

【讨论】：

您能否编辑您提出的答案以扩展其作用以及它如何解决 OP？