Question

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

屏幕截图1：As it can be seen here, there are white space on the background after the cards

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：Here, when I added more cards, and scroll it down, there is a white space below the background

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

请帮助，谢谢！

Answer 1

利用viewheight和viewwidth。

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

Answer 2

我认为你的身体没有达到100％的高度。

html, body {
    height: 100%;
}

然后

#background {
    height: 100%;
}

但为什么不直接将背景颜色属性设置为正文？

Answer 3

为身体着色

 body{
     background-color:black;
  }

Answer 4

body{background-color:#9B59B6;}

这应该有效。但是#background id设置为什么是html元素？

我想这就是问题所在。

Answer 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）。确保使用body属性。

Answer 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

禁用该填充

Answer 7

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

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

}

CSS背景颜色不齐整，不能正确覆盖整个页面

7 个答案:

CSS背景颜色不齐整，不​​能正确覆盖整个页面

7 个答案:

CSS背景颜色不齐整，不能正确覆盖整个页面