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

Question

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

我尝试将div的height设置为100％，如下所示，但是div仍未到达屏幕底部。

这是我最近的尝试：

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

我读到这是W3Schools here

上的解决方案

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

有人可以告诉我如何使该div适合整个屏幕吗？它也需要响应。提前非常感谢！

Answer 1

您可以使用min-height和一个值，以vh（视口高度）单位

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