html - CSS background does not fill all page properly when scrolled horizontally


Keywords:html 


Question: 

So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (). Where you can add cards, delete cards, etc.

I have this background problem where the background does not cover the whole page when I scrolled horizontally,

Here is the problem I have:

The webpage

As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.

The webpage 2

The webpage 3

Here, the background is white when I scrolled horizontally. It does not cover the whole page.

Here is my Html code:

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

Here is my Css code:

#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; 

}

I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.

I also tried width:100% and 'height:100%', But it does not work.

Please help me, Thank you in advance.


2 Answers: 

The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.


First solution

Set your background-color to your body instead of your container div.

Just move background-color:#9B59B6 to

body {
    background-color:#9B59B6;
}

Second solution

The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.

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

More about container-fluid here.

 

You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:

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

Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.