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

Question

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

我尝试将heightdiv 设置为 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 上的解决方案

但这是当前显示的内容：

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

标签： cssheight

Answer 1

您可以使用（视口高度）单位min-height中的值vh

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