Css 如何使div的高度与显示器的高度相匹配

我正在尝试在我的Angular应用程序中更改HTML页面的颜色

我已尝试将div的

高度设置为100%，如下图所示，但div仍未到达屏幕底部

以下是我的最新尝试：

HTML:

我读到这是一个关于学校的解决方案

但这是目前正在显示的内容：


有人能告诉我怎样才能使这个div适合整个屏幕吗？它还需要作出反应。提前多谢
 您可以使用
min height
和
vh
（视口高度）单位中的值

谢谢你的回答。现在底部有一小块空白&滚动条出现在右侧。有没有办法解决这两个问题？@user9847788这很可能是因为你需要减去特定数量的PX（一些页眉高度？）-不能不看整个示例。在我的angular应用程序中，
app.component.HTML
文件中没有HTML标记。所有这些都是我在上面发布的代码。在这种情况下，my
html
class和my
body
class是什么？@user9847788检查您的页面，并尝试检测哪些元素强制布局（可能由于某些边距）具有底部间隙。否则，
100vh
为100vh，应该没有间隙。
<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>

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

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