如何使div占用100vh高度减去标头高度？

Question

我正在尝试建立一个英雄部分，其中div占用100vh减去标题的高度。我最初将css height属性设置为calc（100vh-310px）。 310px是显示器上标头的高度。但是，我试图找到一种自适应的解决方案，其中标题的高度是动态的，并且可以根据屏幕大小而变化。不知道如何去做。我认为不可能使用CSS，并且可以使用javascript / jquery解决此问题。

<header></header>
<div class="heroSection"></div>

.heroSection {
   height: calc(100vh - 310px)
}

Answer 1

您可以为此使用fill-available属性。

.heroSection {
    height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}