How to solve the background color is not filling completely?-CodePudding

I am creating a new react website while I am trying to create cards on the home page after 100vh of height the background color is not showing up?

 .Home {
      background: #121212;
      color: #b9b9b9;
      height: 100vh;
      width: 100%;
}

<div className="Home">
            <TopBar />
            <SearchBar />
            <div className="container">
            <div className="row">
                <div className="column">
                    <div className="card">
                    <h3>Card 1</h3>
                    <p>Some text</p>
                    <p>Some text</p>
                    </div>
                </div>

                <div className="column">
                    <div className="card">
                    <h3>Card 2</h3>
                    <p>Some text</p>
                    <p>Some text</p>
                    </div>
                </div>
                
                <div className="column">
                    <div className="card">
                    <h3>Card 3</h3>
                    <p>Some text</p>
                    <p>Some text</p>
                    </div>
                </div>
                
                <div className="column">
                    <div className="card">
                    <h3>Card 4</h3>
                    <p>Some text</p>
                    <p>Some text</p>
                    </div>
                </div>
            
            </div>
            </div>
  </div>

Here is the image of this, please help me solve this problem

CodePudding user response：

Easy way to achive this is setting body and html to height: 100vh.

Also use class instead of className.

body, html {
  background-color: #121212;
  height: 100vh;
  }

.Home {
  color: #b9b9b9;
  width: 100%;
 }

<div class="Home">
        <TopBar />
        <SearchBar />
        <div class="container">
        <div class="row">
            <div class="column">
                <div class="card">
                <h3>Card 1</h3>
                <p>Some text</p>
                <p>Some text</p>
                </div>
            </div>

            <div class="column">
                <div class="card">
                <h3>Card 2</h3>
                <p>Some text</p>
                <p>Some text</p>
                </div>
            </div>
            
            <div class="column">
                <div class="card">
                <h3>Card 3</h3>
                <p>Some text</p>
                <p>Some text</p>
                </div>
            </div>
            
            <div class="column">
                <div class="card">
                <h3>Card 4</h3>
                <p>Some text</p>
                <p>Some text</p>
                </div>
            </div>
        
        </div>
        </div>
 </div>

CodePudding user response：

The body of the index.html has a margin of 8px.

Add this to your main stylesheet:

body {
  margin: 0;
}

I can't see the image, but I think this is the problem.

If the "Home" component has a parent with flex or inline display, and the background is not going to move (i.e. changing your card with an animation.)

You can set the .Home style like this:

.Home{
  position: fixed;
  top: 0;
  left: 0;

  background: #121212;
  color: #b9b9b9;

  width: 100vw; //Remember to use 100vw instead of 100% for the width
  min-height: 100vh;
}