CODEWITHSUNDEEP
cssheight
user9847788
user9847788

Reputation: 2445

How to make the height of a div match the height of the monitor

I am trying to change the color of a HTML page in my Angular app.

I have tried to set the height of the div to 100% as you can see below, but the div is still not reaching the bottom of the screen.

Here is my latest attempt:

HTML:

<div class="full-height">
    <nav class="navbar navbar-expand-lg" style="background-color: #373F51;">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" [routerLink]="['/welcome']">Welcome</a>
                </li>
            </ul>
        </div>
    </nav>
    <router-outlet></router-outlet>
</div>

CSS:

.full-height {
    height: 100%;
    background: yellow;
}

I read this was a solution on W3Schools here

But this is what's currently being displayed:

screenGrab

Can someone please tell me how I can make this div fit the entire screen? It will need to be responsive also. Thanks a lot in advance!

Upvotes: 0

Views: 73

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

You could use min-height and a value in vh (Viewport Height) unit 

.full-height {
    min-height: 100vh;
    background: yellow;
}

Upvotes: 1

Related Questions