水平滚动时，CSS背景不能正确填充所有页面

Question

所以，我是HTML CSS的新手，正在设计网站。我正在设计一个类似于trello（https://trello.com）的网站。你可以在哪里添加卡片，删除卡片等。

我有这个背景问题，当我水平滚动时背景不会覆盖整个页面，

这是我遇到的问题：

如您所见，整个页面看起来不错，背景正常。但是，如果我添加了更多列表，则背景无法正常工作。

这里，当我水平滚动时，背景为白色。它不包括整个页面。

这是我的Html代码：

<div class="container" id="amethystBackground2">
    <!-- contents here -->  
</div>

这是我的Css代码：

#amethystBackground2
{ 
    position: relative;
    background-color:#9B59B6;
   //This is needed to remove white space on top of page
    margin: 30px 0 0 0; 
   //This is needed to for the background cover the whole page when scrolled verticallly 
    //(when you have too much cards, you need to scroll down)
    min-height: 100vh; 
    min-width: 100vw;
    //This is needed give space on top of page
    margin: 50px 0 0 0; 

}

我尝试添加overflow-x: hidden并且它不允许我水平滚动，这没有帮助。

我还尝试了width:100%和＆＃39;身高：100％＆＃39;，但它不起作用。

请帮帮我，谢谢你。

Answer 1

.container类Bootstrap的大小（以像素为单位），因此如果扩展它，它将不适合整个页面。

第一个解决方案

将background-color设置为 body，而不是container div 。

将background-color:#9B59B6移至

body {
    background-color:#9B59B6;
}

第二个解决方案

＆＃34; Bootstrapest方式＆＃34; 可能会使用container-fluid而不是容器，因为它可以扩展以填充可用的宽度。

<div class="container-fluid" id="amethystBackground2">
    <!-- contents here -->  
</div>

有关容器流体here的更多信息。

Answer 2

你有一类容器，如果你使用bootstrap我的建议是创建你的#amethystBackground2 div作为外部div，所以像这样：

<div id="amethystBackground2">
    <div class="container">
    </div>
</div>

现在相应地设置你的宽度/高度。如果您使用overflow-x：hidden规则，那么您告诉页面您不希望水平滚动，因此不会显示滚动条。