html - 水平滚动时，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% 和 'height:100%'，但它不起作用。

请帮助我，在此先感谢您。

Answer 1

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

---

第一个解决方案

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

只需将 background-color:#9B59B6 移动到

body {
    background-color:#9B59B6;
}

---

第二种方案

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

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

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