Why is my page div not filling up the entire screen?

Question

Unfortunately I am horrible at CSS and HTML, so I can't figure out why my page looks like this:

As you can see, there is all that whitespace when the entire background should be black.

CSS:

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

HTML:

        <div id="page">
            <div class="container">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm using Bootstrap here so I can make the page mobile-friendly. Just not working out for some reason

What do your CSS rules for `body` look like? What browser are you observing this condition in? — esqew, Jan 24 '21 at 20:44
"page" is my body. This is also in Chrome. I have other pages that don't have this problem, so not sure if it's something wrong with my outer "page" div or something with my content — archingfork, Jan 24 '21 at 20:46
I think you might be confused; in the snippet you provided, the ID `page` has been applied to a `div` node, not a `body` element - is this a typo in your question? — esqew, Jan 24 '21 at 21:05

s.kuznetsov · Answer 1 · 2021-01-24T20:55:20.193

0

Because your main lacks height. Set the parent container height to 100vh. As an example, I created a parent with the .main class. Like this:

.main {
  height: 100vh;
}

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}

.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

<div class="main">
    <div id="page">
        <div class="container">
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

edited Jan 24 '21 at 20:55

answered Jan 24 '21 at 20:49

s.kuznetsov

14,870
3
10
25

So how come I needed to wrap the "page" div around another class? – archingfork Jan 24 '21 at 20:57
@archingfork, To set the height to the same height as the screen. Usually, I don't assign a height of 100 for the body tag. And I think it's better to use the main tag for this - and this will be the correct approach. – s.kuznetsov Jan 24 '21 at 21:02
@archingfork, Look at the first answer of this question Even this link advises `100vh` for the **main** container, **not the body tag** - https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window. – s.kuznetsov Jan 24 '21 at 21:05

Xhoni Komini · Accepted Answer · 2021-01-24T20:56:06.650

Try to give your body tag a height of 100vh. This way even if you add other div tag the whole screen will still be black. If you just want your #page div to fill up the entire screen apply the code below to the #page div itself.

body {
  height:100vh;
}

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

        <div id="page">
            <div class="container">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Why is my page div not filling up the entire screen?

2 Answers2